总结关于原生的ajax以及jQuery的ajax的编写和使用

总结关于原生的ajax以及jQuery的ajax的编写和使用

一、原生ajax

1.创建异步对象
    var XHR=null;
    if (window.XMLHttpRequest) {
        XHR = new XMLHttpRequest();   // 非IE内核
    } else if (window.ActiveXObject) {
        XHR = new ActiveXObject("Microsoft.XMLHTTP");  // IE内核
    } 
2.使用open方法设置和服务器的交互信息。     //设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数用？号连接
    if(XHR){
        XHR.open("GET", "ajaxServer.action");  //建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
3.发送请求
        XHR.send();
        
4.注册事件 onreadystatechange 状态改变就会调用
        //接收到服务端响应时触发
        XHR.onreadystatechange = function () {		//每当readyState值变化时就会调用一次这个方法
            // readyState值说明
            // 0,未初始化,XHR对象已经创建,还未执行open
            // 1,服务器连接已建立,已经调用open方法,但是还没发送请求即没调用send()方法
            // 2,请求已接收,调用send方法，未接收到响应。
            // 3请求处理中，已经接收到部分响应数据
            // 4,读取完成

            // status值说明
            // 200:成功
            // 404:没有发现文件、查询或URl
            // 500:服务器产生内部错误
            if (XHR.readyState == 4 && XHR.status == 200) {
                // 这里可以对返回的内容做处理
                // 一般会返回JSON或XML数据格式
                console.log(XHR.responseText);
                // 主动释放,JS本身也会回收的
                XHR = null;
            }
        };
    }

2.jQuery的ajax：
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);
$("#div1").load("demo_test.txt #p1");

$.ajax({
	type:请求方式，
	contentType:默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。,
	url:发送请求的地址。,
	data:发送到服务器的数据。将自动转换为请求字符串格式。
	success:function(){    //成功发送之后的执行方法
	}
	error:function(){  、//出现错误的执行方法
	}
});

下面的是指定了请求方法类型的两种常用的ajax请求

$.get(URL,callback);    //必需的 URL 参数规定您希望请求的 URL。可选的 callback 参数是请求成功后所执行的函数名。

$.post(URL,data,callback);		//必需的 URL 参数规定您希望请求的 URL。可选的 data 参数规定连同请求发送的数据。可选的 callback 参数是请求成功后所执行的函数名。

记住ajax默认为异步的，当需要ajax整个过程执行之后再执行的事件时，要设置其为非异步的，添加async:false的属性。ajax总体还是很强大的，这只是介绍了日常常用的几种方法。