Ajax请求过程

Ajax的使用
(1)创建 XMLHttpRequest 对象,也就是创建一个异步调用对象;
(2)创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、 URL 以及验证信息;
(3)设置响应 HTTP 请求状态变化的函数;
(4)发送 HTTP 请求;
(5)获取异步调用返回的数据;
(6)使用 JavaScript 和 DOM 实现局部刷新。
例如:

var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', 'demo.php', true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState===4 && xmlHttp.status===200){
    }
}

——创建 Ajax 核心对象XMLHttpRequest

var xmlhttp;
if(window.XMLHttpRequest){
    // IE7+,Chrome,Firefox,Safari,Opera执行此代码
    xmlhttp = new XMLHttpRequest();
}else{
    // IE5、IE6执行该代码
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}

——向服务器发送请求

xmlhttp.open(method, url, async);
xmlhttp.send();

        参数说明:method:请求类型,GET 或 POST;
                           url:文件在服务器上的位置,相对位置或绝对位置;
                           async:true(异步)或false(同步);
         post请求不同于get请求,send(string)方法在 POST 请求时才使用字符串参数,否则不用带参数
         post请求一定要设置请求头的格式内容

xmlhttp.open('POST', 'ajax_test.html', true);
xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xmlhttp.send('fname=Herry&lname=Ford');

——服务器响应处理
          responseText:获取字符串形式的响应数据
   ①同步处理

xmlhttp.open('GET', 'http://www.runoob.com/try/ajax/demo_get.php', false);
xmlhttp.send();
document.getElementById('mydiv').innerHTML = xmlhttp.responseText;

          ②异步处理

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState===4 && xmlhttp.status===200){
        document.getElementById('mydiv').innerHTML = xmlhttp.responseText;
    }
}

      xmlhttp.readyState一共有5种请求状态,从0到4发送变化:
                     0:请求未初始化;
                     1:服务器连接已建立;
                     2:请求已接收;
                     3:请求处理中;
                     4:请求已完成,且响应已就绪
      xmlhttp.status响应状态码,比较常用的有:
                     200:请求成功;
                     304:该资源在上次请求之后没有任何修改(这通常是浏览器的缓存机制,使用GET请求时尤其需要注意);
                     403:(禁止)服务器拒绝请求;
                     404:(未找到)服务器找不到请求的网页;
                     408:(请求超时)服务器等候请求时发生超时;
                     500:(服务器内部错误)服务器遇到错误,无法完成请求。   

你可能感兴趣的:(Ajax)