模拟数据交互系列之六--ajax

Contents

1. AJAX 请求

AJAX 请求

介绍

即Asynchronous Javascript And XML，AJAX.不是一门语言，而是对现有持术的综合利用。
本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
不管是同步交互，还是异步交互，只是跟服务器请求的一种方式，交换数据的一种方式。

那么我们先说最实用的东西，然后在对知识升华一下

创建请求的四步骤

XMLHttpRequest 对象是 AJAX 的关键。说白ajax主要的就是这个内容

第一步：我们需要创建一个对象，用于跟服务器进行交互
这个对象叫做xmlHttpRequest，这个对象是浏览器给我们提供的
目的就是用来跟服务器进行数据交互的.

1	var xhr=new XMLHttpRequest;

第二步：我需要跟服务器进行数据交互，这个时候我需要跟服务端的资源建立一个连接，xhr ，提供了一个方法，叫做open,

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

1	xhr.open("get","get.php",true);

第三步：我们需要发送数据给服务器，我们应该调用xhr提供的send 方法.
如果不需要发送数据，我们这个方法也不能省略，我们可以传递一个null过去

以为是get方式的话这个地方的内容是为空的，如果是post的话方法就不一样这里头的就是数据的内容，POST还得加一个请求头

1
2
3

xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xhr.send(null);

第四步：设置一个回调函数，当服务器端有数据返回的时候会调用这个回调函数与服务器交互的过程当中，服务器会不断的给客户端返回状态，如果有状态返回，则使用该属性 readyState 接收。
readyState==4 代表服务器已经响应完毕
status 服务器端返回给客户端的一个状态码，如果返回的是200代表响应成功。 reponseText 用来接收服务器端返回的数据。

xhr.onreadystatechange=function() {
        //说明响应成功.
        if(xhr.readyState==4 && xhr.status==200){
        //这个是对响应后的数据处理方法多种多种，是情况而定。
                var data=xhr.responseText;
                alert(data);  
        } 
}

封装到一个变量

封装带一个对象上思想上跟jq是很像的：

var $={
ajax:function(obj){
  //我要在这里获取到type，url，data ，success
  var xhr=new XMLHttpRequest();
  if(obj.type=="get"){
      obj.url=obj.url+"?"+obj.data;
      obj.data=null;
      }
      xhr.open(obj.type,obj.url);
      if(obj.type=="post"){
      xhr.setRequestHeader("Content-Type",
      "application/x-www-form-urlencoded");
  }
  xhr.send(obj.data);
  xhr.onreadystatechange=function(){
      if(xhr.readyState==4 && xhr.status==200){
      var data1=xhr.responseText;
 //请求完成的时候调用我传递的回调函数.
          obj.success(data1);
      }
      }
  }
};

调用：

$.ajax({
        url:"01ajax.php",
        type:"get",
        data:"username=zhangsan",
        success:function(data){
            alert(data);
        //其他的方法可以在添加
        error:function(){
          }
    });

在jq中的API方法

$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$(‘form’).serialize() 序列化表单
（即格式化key=val&key=val）属性名
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）

兼容问题处理（了解）

var xhr;
if(XMLHttpRequest){
//  标准的写法
    xhr = new XMLHttpRequest;
}else{
//  ie5,6的写法
    xhr =  new ActiveObject("Microsoft.XMLHTTP")
}

知识点的提升

Async = false

注意：我们在open的方法中如果最后一个参数为false一定要记住要send方法放到最后一步去执行，因为我们false的是同步处理，那就一定要等当 readyState 等于 4 且状态为 200时，表示响应已就绪：

readyState的四种状态

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

每位数字的具体情况：

0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。

这个方法导致一个 HTTP 请求发送。如果之前没有调用 open()，或者更具体地说，如果 readyState 不是 1，send() 抛出一个异常。否则，它发送一个 HTTP 请求，该请求由以下几部分组成：

XMLHttpRequest.send()

之前调用 open() 时指定的 HTTP 方法、URL 以及认证资格（如果有的话）。
之前调用 setRequestHeader() 时指定的请求头部（如果有的话）。
传递给这个方法的 body 参数。
一旦请求发布了，send() 把 readyState 设置为 2，并触发 onreadystatechange 事件句柄。
如果之前调用的 open() 参数 async 为 false，这个方法会阻塞并不会返回，直到 readyState 为 4 并且服务器的响应被完全接收。否则，如果 async 参数为 true，或者这个参数省略了，send() 立即返回，并且正如后面所介绍的，服务器响应将在一个后台线程中处理。
如果服务器响应带有一个 HTTP 重定向，send() 方法或后台线程自动遵从重定向。当所有的 HTTP 响应头部已经接收，send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件句柄。如果响应较长，send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄：这可以作为一个下载进度指示器。最后，当响应完成，send() 或后台线程把 readyState 设置为 4，并最后一次触发事件句柄。

++其他方法的调用时候的 readyState 的值是不一样的，详细查看W3C文档++

chenzq FE

try to be a better man!