首页 > 代码库 > Ajax全套

Ajax全套

2024-10-19 08:51:01   202人阅读

Ajax是什么？

AJax是相对于Form表单而言的，提交时可以偷偷想后台发数据，偷偷向后台发数据，页面不刷新；

jquery和Ajax关系：

Jquery没有Ajax功能，它之所以可以调用Ajax向服务端提交数据，是因为Jquey封装了原生Ajax的代码

使用原生Ajax的优势：

使用Ajax直接使用JS的XMLHttp Request对象， 无需引入Jquery了。这样响应客户端携带信息量减少，可节省流量。

 

XMLHttp Request对象

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。

XmlHttpRequest对象的主要方法：

技术分享 
XmlHttpRequest.open("请求方法","请求的url",是否执行回调函数？)

send用户发送请求

在请求体里

setRequestHead()
在请求头里设置数据


getRespnseHeaders()
获取所有响应头数据

getRespnseHeader(响应头)
获取响应头中指定得header对应值


abort 终止请求
View Code

XmlHttpRequest对象的属性：

技术分享 
bj.readyState XMLHttpResposr的状态

0：未初始化，尚未调用open方法
1：启动调用了open方法
2：发送已经调用了send方法
3：接收状态（已经接收了部分数据）
4：完成（接收完毕服务端响应的数据）


只要对象的ready State改变就会执行该函数
xhr.onreadystatechange=function () {
            
        }



obj.responseText 服务端返回的数据（字符串类型）
obj.responseXML 服务端返回的数据（XML对象）

obj.number states 服务端返回的状态码
obj.response stateText 服务端返回的状态信息
View Code

 

使用XmlHttpRequest对象发送 GET请求

技术分享 
    function add1() {
{#        得到一个XMLHttpRequest对象 xhr   #}
        var xhr=new XMLHttpRequest();
{#        open打开一个http连接到指定url   XMLHttpRequest请求#}
        xhr.open(‘get‘,‘/add1/?i1=18&name=张根 ‘)
          {#       设置请求体的数据#}
        xhr.send()
{#        XMLHttpRquest的状态改变这个函数的状态就会执行jquryAjax中的success回调函数就是基于此#}
        xhr.onreadystatechange=function () {
            if(xhr.readyState==1){console.log("对象未调用open方法")}
            if(xhr.readyState==2){console.log("请求发送")}
            if(xhr.readyState==3){console.log("接收中")}
            if (xhr.readyState == 4) {console.log(xhr.responseText)}}
    }
View Code

 

使用XmlHttpRequest对象发送 POST请求

 

 

 

 

 

 

 

博客链接：http://www.cnblogs.com/wupeiqi/articles/5703697.html

Ajax全套


联系
我们