自学-jq篇-ajax方法

ajax方法

ajax= 异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

ajax的核心

1、建立XMLHtppResquest对象

此处要注意有兼容性问题（对IE7及以下浏览器写法有不同），实现代码如下：

<script>
    var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else{
        //对IE7及以下版本浏览器做兼容
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
</script>

2、通过open方法建立连接，发送请求及参数

此处用到ajax的一些方法。其实主要是open()方法。请求分为"GET"与"POST"两种形式。"GET"用来获取服务器返回的一些参数，而"POST"方法则允许用户修改服务器上的一些数据。

<script>
      /*
       *open方法解释
       *建立请求  共三个参数
       *第一个参数：使用的方法，GET  or  POST
       *第二个参数：url地址
       *第三个参数：同步方式  or  异步方式，一般置为true，为异步；默认也为异步调用
       */
       request.open("GET","changge",true);
      /*
       *send方法解释
       *发送参数，一般针对于POST方法。使用GET方法时，此参数传null或不传值
       */
     request.send(null);
</script>

3、建立响应信息

对服务器返回的状态进行判断，若成功，则拿到数据，进行后续的事宜。这里主要是对request.readyState和request.status两个属性进行判断。

        request.readyState：状态码属性，枚举如下：

        0：请求未初始化，open还没有调用
        1：服务器连接已建立，open已调用
        2：请求已接收，即收到头信息了
        3：请求处理中，即接收到响应主体了
        4：请求已完成，且响应已就绪，即响应完成了

        request.status：状态值，比较多，例如：404 Not Found，400 请求出现语法错误。

<script>
    request.onreadystatechange = function() {
        if (request.readyState==4) {//请求完成
            if (request.status==200) { //OK  一切正常
                var data = JSON.parse(<span style="font-family: Arial, Helvetica, sans-serif;">'</span><span style="font-family: Arial, Helvetica, sans-serif;">(</span><span style="font-family: Arial, Helvetica, sans-serif;">'</span><span style="font-family: Arial, Helvetica, sans-serif;">request.responseText</span><span style="font-family: Arial, Helvetica, sans-serif;">)</span>);//将返回的数据放在data变量中
                if (data.success) { 
                    document.getElementById("XXX").innerHTML = data.msg;
                } else {
                    document.getElementById("XXX").innerHTML = "出现错误：" + data.msg;
                }
            } else {
                alert("发生错误ÿ