JS中的Ajax技术

Ajax：是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

/*
* 不同的浏览器可能实现XMLHttpRequest的方式不同。
* 所以需要指明浏览器的版本属性，不过现在的jsAPI都帮你做好了这一部分工作。
* */
XMLHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

原生JS中Ajax访问过程

//1.创建XMLHttpRequest对象用于发送和接收http请求和响应。
var xhr = new XMLHttpRequest();

/*2.给XMLHttpRequest对象xhr的onreadystatechange属性定义用于处理连接超时和数据的函数，
这个函数将在XMLHttpRequest对象每次发生变化时被调用。*/
xhr.onreadystatechange = function () {
    /*
    * readyState属性有五种取值0~4;
    * 0：表示open()尚未被调用
    * 1：表示send()尚未被调用
    * 2：表示服务器尚未返回响应
    * 3：正在接收来自服务器的响应
    * 4：表示响应接收完成
    * */
    if(xhr.readyState == 4){

        //status属性接收http响应中包含的状态码，200表示通信正常完成。
        if(xhr.status == 200 ){

            //以文本形式返回响应数据
            var textdata = xhr.responseText;
            //以xml形式返回响应数据
            var xmldata = xhr.responseXML;

        }
    }
}

/*3.调用XMLHttpRequest对象xhr的open(Method,URL,isunSyn)方法
指定请求所发送的类型(Method:POST、GET）、服务器URL
和是否非同步发送（isunSyn：true为异步，false为同步,默认为true）
*/

xhr.open('GET','http://example.com/service.action?name=xxx&age=18&date = '+ new Date());
//如果为GET方式发送的，可以在URL中添加需要传递的参数字符串
//如果是以POST方式发送的，就需要将参数字符串传入send()方法中进行传递。

xhr.setRequestHeader(name,value);//可以以键值对的方式设置请求头

//4.调用XMLHttpRequest对象xhr的send()方法发送请求
xhr.send(null);//如果为POST方式发送那么send()的方式为需要传递的参数字符串

 

JQuery中实现Ajax技术

在JQuery中对原生JS的Ajax代码进行了封装，使我们可以用非常简洁的代码来实现Ajax，但是在使用JQuery的时候我们需要导入相应的js文件。

/*
* 第一种：使用ajax()函数
* */
$.ajax('http://example.com/service.action',{
   type:'GET',
   success:function (data,status,xhr) {
       //成功时执行的操作
   },
    error:function (xhr,status,errorThrown) {
        //失败是执行的处理
    }
});
/*
* 上面的代码中，第一个参数为服务器的URL，不过这个属性可以在第二个参数中进行设置。
* 第二个参数为封装了ajax所需属性的对象，该对象有很多属性可以设置
* 不过这里只对基本的属性进行介绍，大家可以去网上查找相关文档了解。
* 1.URL：服务器的URL
* 2.对象中的data：所发送的数据对象或字符串
* 3.success和error匿名函数中的data：返回响应的数据
* 4.status：状态码
* 5.xhr：XMLHttpRequest对象
* 6.errorThrown：失败时返回的错误异常
* */

/*
* 第二种：使用ajax()的包装函数
* */

//1.以get方式通信，dataType为响应的数据类型，example:json、xml、文本等。
$.get(url,data,success(data,status,xhr),dataType);

//2.以post方式通信
$.post(url,data,success(data,status,xhr),dataType);

//3.获取的内容为JSON
$.getJSON(url,data,success(data,status,xhr));//其实就是规定了响应的数据类型

//4.获取的内容为JavaScript并执行。
$.getScript(url,data,success(data,status,xhr));