AJAX请求数据的步骤

1.第一步:创建异步对象

var xhr=new XMLHttpRequest ();//创建一个异步对象。
//=======//
//上面创建异步对象的方法非IE浏览器都支持。IE7以上也支持。

2.第二步:创建http请求(只是打开和url的连接,并不会发送请求。)

 var xhr=new XMLHttpRequest();    
 xhr.open("get","http://api.jisuapi.com/express/query","true");
    //参数一:发送请求的方式:方式分别有post和get
    //参数二:请求地址
    //参数三:是否是异步提交true:异步,flase:同步提交
    //=======//
    //如果使用post请求需要为post请求设置一个请求头(必须在发送数据之前)设置方法如下:
    //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

3.第三步:发送数据(get和post发送数据的方式不相同)

var xhr=new XMLHttpRequest ();//创建一个异步对象。
    xhr.open("get","http://api.jisuapi.com/express/query?name=zhangsan","true");
//在发送数据上需要注意的是get和post的发送方式
//get:数据需要拼接到open方法里面的URL地址里格式为URL?数据。(注意:get方式也还是需要调用send方法如不调用数据将不会发送)
//post:数据直接写到send方法里即可如下:
  //  xhr.send("name=zhangsan");

4.第四步:设置监听请求状态的回调函数

请求状态分为5步:
0.未初始化:异步对象创建出来但是还没有打开连接,(即未调用open方法)
1.已初始化:异步对象已经创建并且打开了连接(调用了open方法),但是还没有发送请求(未调用end方法)
2.已发送数据:已经调用了send方法,但web服务器响应还未返回
3.正在接收:web服务器接收完数据并且处理完毕后,向客户端发送响应结果
4.接收完毕:当web服务器响应的数据全部接收完毕

以上序号对应readyState的值

var xhr=new XMLHttpRequest ();//创建一个异步对象。
    xhr.open("get","http://api.jisuapi.com/express/query","true");
    //下面的回调函数是会动态监听请求状态
    xhr.onreadystatechange=function(){
        //readyState属性会记录下5种请求状态
        if(xhr.readyState == 4){
            alert("web服务器响应的数据全部接收完毕")
        }
    }

你可能感兴趣的:(AJAX请求数据的步骤)