Ajax含义

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，Ajax用一句话来说就是无须刷新页面即可从服务器取得数据。注意，虽然Ajax翻译过来叫异步JavaScript与XML，但是获得的数据不一定是XML数据，现在服务器端返回的都是JSON格式的文件。

完整的`Ajax`请求过程

创建XMLHttpRequest实例
发出HTTP请求
接收服务器传回的数据
更新网页数据

下面先看一个红宝书上给出的发起Ajax请求的例子

var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest实例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 判断请求响应过程阶段，4 阶段代表已接收到数据
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状态码
      console.log(xhr.responseText);   // 输出响应的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
    }
  }
};

xhr.open('get', 'example.txt', true); // 初始化xhr实例，或者说启动请求
xhr.send(null);  // 设置HTTP请求携带参数，null为不带参数

javascript中的Ajax

在javascript中，ajax是通过XMLHttpRequest对象来实现的，这个对象用于和后台进行数据的交互。在ie7之前，XHR是通过MSXML库中的ActiveX对象实现的，ie7后我们可以直接使用 var xhr = new XMLHttpRequest();创建一个XHR对象，创建好之后，我们就可以通过xhr对象来调用相应的方法了。

javascript中Ajax的使用方法

在javascript中，调用Ajax主要分为两步，先open，再send
open指的是开启一个请求，而send负责发送这个请求

open()方法
```
xhr.open('type','url',true);
```
第一个参数是请求类型，get/post
第二个参数是请求的地址
第三个参数表示请求是同步还是异步，true代表异步处理
注意的一点就是，open方法不会发送请求，只是启动一个请求准备发送
send()方法
```
xhr.send(null);
```
send方法将请求送给服务器 send方法接受一个参数作为要发送的数据，如果不需要发送数据，参数设为null
检测响应状态码
一般请求发送之后，我们可以根据xhr的status属性来判断下一步的操作，status属性会返回一个http状态码
100-200表示请求已经接受，需要继续处理
200-300表示请求已被服务器成功接收
300-400表示重定向，需要客户端采取进一步操作
400-500表示客户端发生错误，妨碍了服务器的处理
500-600表示服务器处理请求的过程发生错误
```
`if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
   console.log(“request success”);
   }else{
       console.log(“request failed”);    
   } `
```
检测 readyStatus属性
发送异步请求的时候，一般要检测xhr的readyState属性，这个属性表示请求过程的当前活动阶段，一共有5个值，0,1,2,3,4
0代表为初始化，open()未调用
1代表启动已调用open，未调用send
2代表已经调用send, 但还没有接受到响应
3代表接受到部分响应数据
4代表接受到全部响应数据
当readyState的值发生变化时，就会触发一次readystatechange事件，用这个事件检测每次状态变化后的值。

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4){            
            if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
                console.log('request success');
            }else{
                console.log('request failed');    
            }
        }    
    } 
    xhr.open('get','test.php',true);        
    xhr.send(null);

get请求和post请求

get请求，常用于向服务器查询某些信息，get可将查询的字符串参数加在url的末尾

   xhr.open('get','test.phpname1=value1&name2=value2',true);

post请求，通常用于向服务器发送应该被保存的数据，post请求的主体可以包含格式不限且大量的数据，

 xhr.open('post','test.php',true);
 xhr.send('name1=value1&name2=value2');

get请求和post请求的区别

get请求会将参数跟在url后进行传递，而post则是作为http消息实体内容发送给服务器
get方式对于传输的数据有大小限制，通常不能大于2kb，而post方式传递的数据量大小没有限制
get方式会将请求的数据会被缓存起来，可以从浏览器的历史记录中读取这些数据，所以会带来一些安全性方面的问题，而post相对来说安全很多

`Ajax`请求过程详解

1. 创建`XMLHttpRequest`实例

从上面的的代码可以看出，创建一个XHR实例方式为：

var xhr = new XMLHttpRequest();

2. 发出HTTP请求

实例创建好后，首先需要启动一个HTTP请求，使用XHR的open()方法，open方法接受三个参数

XMLHttpRequest.open(method, url, isAsync)
// 例如
xhr.open('get', 'http://www.baidu.com', true)

第一个参数为http请求使用方法，如（'get'，'post'等），第二是参数是请求的url, 第三个参数代表是否异步发送请求（可选）。调用open()方法后会启动一个http请求，但它不会立即发送请求，处于待命状态。需要注意的是：请求的url必须要跟请求源域(origin)同域，也就是说协议、域名、端口号要一致，跨域请求要使用别的方法。接着调用send()方法就会发出这个http请求。

xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)

send()方法接受一个参数，为http请求发送的数据（通常用于'post'方法），如果为null，表示不发送数据。至此，一个异步的http请求就发送到了服务器。

3. 接收服务器传回的数据

3.1 发送同步请求

如果将open方法的第三个参数设为false，即为同步请求，当收到服务器的响应后，相应的数据会自动填充到XHR对象的属性中，主要包括以下四个：

responseText：作为响应主体被返回的文本。
responseXML: 响应返回的XML文档，能接收到的前提是，响应的Content-Type字段的值为
text/xml或者application/xml。
status: HTTP状态码。
statusText: HTTP状态码说明。

当客户端收到以上信息后，首先要判断HTTP状态码来确认响应是否成功，状态码在200-300之间表示请求成功，同时304代表请求资源未被修改，可使用浏览器本地缓存。如果成功就可以获取响应报文主体中的数据了。

xhr.open('get', 'http://www.baidu.com', false)
xhr.send(null)

if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状态码
  console.log(xhr.responseText);   // 输出响应的文本
} else {
  console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}

3.2 发送异步请求

如果将open方法的第三个参数设为true，即为异步请求。那么就需要一个事件来通知程序异步请求的结果是否返回。XHR对象中的readyState属性，表示请求/响应整个过程所处的阶段，它有五个值分为对应五个阶段：

0：未初始化。未调用open()方法。
1：启动。已经调用open()方法，但未调用send()方法。
2：发送。已调用send()方法，但未收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接受到全部响应数据。

readyState的值每变化一次，都会触发一次readStatechange事件，我们定义一个事件处理函数onreadStatechange()，并监听readyState == 4状态，就可以得知响应数据已全部收到，并进行下一步操作。那么就是文章开头给出的代码：

var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest实例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 判断请求响应过程阶段，4 阶段代表已接收到数据
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校验HTTP状态码
      console.log(xhr.responseText);   // 输出响应的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
    }
  }
};

xhr.open('get', 'example.txt', true); // 初始化xhr实例，或者说启动请求
xhr.send(null);  // 设置HTTP请求携带参数，null为不带参数

补充XHR中三个有用的事件

`timeout`事件

当超出了设置时间还未收到响应，就会触发timeout事件，进而调用ontimeout事件处理程序。同时timeout也是XHR的一个属性，用于设置这个时间阈值。下面是用法：

xhr.ontimeout = function() {
  alert('timeout!')
}

xhr.open('get', 'http://www.baidu.com', true)
xhr.timeout = 1000 // 时间阈值设为1秒
xhr.send(null)

`load`事件

load事件用于简化对readState值的判断，响应数据全部接收完毕后（也就是readState == 4）会触发load事件，使用onload事件处理函数进行后续操作，onload会接收一个event对象，它的target属性等于XHR对象，当然我们在定义这个事件处理函数时也可以不传入这个参数，来看下面的用法：

var xhr = new XMLHttpRequest()
xhr.onload = function () {
  if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {
    console.log(xhr.responseText);   // 输出响应的文本
  } else {
    console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
  }
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)

这样就不用去关心readyState值的变化情况了。当然如果想在特定readyState值上做一些逻辑处理，还是要用之前的方法。

`progress`事件

这个是很有用的一个事件，progress事件会在浏览器接收数据期间周期触发，代表整个请求过程的进度，它的事件处理程序onprogress接收一个event对象，event.target是XHR对象，另外event还有三个属性：

lengthComputable：Boolean值，进度信息是否可用。
osition：已经接收到的字节数。
totalSize：总共要接收的字节数，被定义在响应报文的Content-Length字段中。

如果响应报文中有Content-Length字段，那么我们就可以计算当前时刻响应数据的加载进度了，这也是之前看到的一个面试题。看下面的代码：

xhr.onprogress = function(event) {
  if(event.lengthComputable) {
    console.log(`Received: ${(event.position/event.totalSize).toFixed(4)*100}%`);
  }
}

jQuery中的Ajax

javascript的ajax操作比较复杂， jQuery提供了一系列的方法，大大简洁了Ajax开发

1.load()方法

load(url,data,callback);

load方法主要是用来远程载入HTML代码并插入DOM
第一个参数是要访问的HTML的url地址
第二个参数是要发送至服务器的key:value数据
第三个参数是回调函数，需要注意的是：load方法的回调函数无论请求成功或者失败都会执行

load方法的传递方式是根据参数data来自动指定的

$('#submit').load('test.php',function(){});    //    无参数传递，get方式
$('#submit').load('test.php'{name:'fang',age:'30'},function(){});    //    有参数传递，post方式

2.$.get()方法

$.get(url,data,callback,type)

前两个参数和load方法是一样的
但是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式，如xml,html,json,script,text

$.get('test.php',{
                name : 'fang',
                age : '33'
},function(){
//回调函数
},type)

3.$.post()方法

$.post(url,data,callback,type)

前两个参数和load,$.get()方法是一样的
但是回调函数只有在载入成功的时候才会执行
第四个参数是服务器返回的内容格式，如xml,html,json,script,text

$.post('test.php',{
                name : 'fang',
                age : '33'
},function(){
//回调函数
},type)

4.$.ajax()方法

$.ajax()方法，这是方法不仅可是实现上面的load,$.get(),$.post()方法，而且还可以设定多种状态下的回调函数
$.ajax(options)是jQuery的最底层Ajax实现，这个方法只有一个参数，但是这个参数内包含了所需要的一切信息，参数以key:value形式存在，所有参数都是可选的
$.ajax(url,type,timeout,data,datatype,beforeSend,complete,success,error,global)这些是所有的参数
url:发送请求的地址
type:请求方式，默认get
timeout:设置请求超时时间
data:发送到服务器的数据
datatype:预期服务器返回的数据类型
beforeSend:发送请求前可以修改XMLHttpRequest对象的函数
complete:请求完成后调用的回调函数
success:请求成功后调用的回调函数
error:请求失败后调用的回调函数
global:表示是否触发全局Ajax事件，默认为true

$.ajax({
    url:'test.php',
    type:'GET',
    datatype:'json',
    beforeSend:function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
})

Ajax基础知识

Ajax含义

完整的`Ajax`请求过程

javascript中的Ajax

javascript中Ajax的使用方法

get请求和post请求

`Ajax`请求过程详解

1. 创建`XMLHttpRequest`实例

2. 发出HTTP请求

3. 接收服务器传回的数据

补充XHR中三个有用的事件

`timeout`事件

`load`事件

`progress`事件

jQuery中的Ajax

猜你喜欢

Ajax基础知识

Ajax含义

完整的Ajax请求过程

javascript中的Ajax

javascript中Ajax的使用方法

get请求和post请求

Ajax请求过程详解

1. 创建XMLHttpRequest实例

2. 发出HTTP请求

3. 接收服务器传回的数据

补充XHR中三个有用的事件

timeout事件

load事件

progress事件

jQuery中的Ajax

猜你喜欢

完整的`Ajax`请求过程

`Ajax`请求过程详解

1. 创建`XMLHttpRequest`实例

`timeout`事件

`load`事件

`progress`事件