原生ajax和jQuery中的ajax

Ajax全称是asynchronous javascript and xml,主要用来实现客户端与服务器端的异步通讯效果，实现页面的局部刷新，从而创建快速动态网页的技术
什么是同步？什么是异步？
同步：同一时刻只能做一件事，上一步完成才能开始下一步
异步：同时做多件事，效率更高

原生js中ajax发送数据的步骤

第一步：创建XMLHttpRequest对象，也就是创建一个异步对象

//必须基于xhr对象，创建xhr对象
var xhr = null;
//做兼容性处理，看window底下是否含有XMLHttpRequest对象
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest();//w3c规范以后
}else{
	xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5及以前
}

第二步：绑定监听函数让异步对象接收服务器的响应数据
注：一个成功的响应有两个条件：1.服务器响应为200说明成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){//ajax请求已经完成
		if(xhr.status == 200){//这是一个成功的请求
			console.log(xhr.responseText)
		}
	}
}

第三步：建立连接

//xhr.open(method,url,boolean)
xhr.open("GET","01.php",true)// true是异步，可省略

第3.5步：post请求发送之前，必须设定发送格式(get不需要设置)

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

第四步：发送请求

xhr.send(null)// 用于post传参，形式："a=1&b=2"，而get传参就在url后面用“?”拼接

状态码和响应码

xhr.readyState为状态码有五个步骤，分别对应的是01234
0：请求未初始化化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

响应码：status
1xx 信息类错误
2xx 成功 200
3xx 重定向 304
4xx 客户端错误 404
5xx 服务端错误

ajax的优缺点

优点： 可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
缺点： 对搜索引擎不友好，要实现ajax下的前进后退功能成本较大；跨域问题限制

对比传统的form表单提交

1.ajax在提交、请求、接收时，都是异步进行的，网页不需要刷新
form提交则是新建一个页面，哪怕是提交给自己本身的页面，也需要刷新
2.ajax在提交时，是在后台新建一个请求；form却是放弃本页面，而后再请求
3.ajax必须要使用js来实现，不启用js的浏览器，无法完成该操作；form却是浏览器的本能，无论是否开启js都可以提交表单
4.ajax在提交、请求、接收时，整个过程都需要使用程序来对其数据进行处理；
form提交时，却是根据你的表单结构自动完成，不需要代码干预

get和post的区别

1.参数放置的位置
get参数在地址栏中
post参数在请求体中
大小
get是2000个字符左右
post理论上是无限大的

post请求

<script>
        document.querySelector("#username").onblur = function(){
            // 1.获取用户数据
            var name = this.value;
            // 2. 让异步对象发送post请求
            // 2.1 创建异步对象
            var xhr = new XMLHttpRequest();
            // 2.2 设置请求行 open(请求方式，请求url)
                // 2.post请求不需要拼接参数
            xhr.open("post","validate.php");
            // 2.3 设置请求头:setRequestHeader()
                // 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    		//.如果没有设置，参数无法正确的传递到服务器(本质上说，如果没有参数，也不一定需要设置，不会影响请求的发送)
            // 2.4 设置请求体 send()
                // 2.post的参数在这个函数中设置(如果有参数)
            xhr.send("username="+name);

            // 3.让异步对象接收服务器的响应数据
            // 一个成功的响应有两个条件：1.服务器成功响应了  2.异步对象的响应状态为4(数据解析完毕可以使用了)
            // 当异步对象的响应状态发生改变的时候，会触发一个事件：onreadystatechange
            xhr.onreadystatechange = function(){
                // 判断服务器是否响应  判断异步对象的响应状态
                if(xhr.status == 200 && xhr.readyState == 4){
                    document.querySelector(".showmsg").innerHTML = xhr.responseText;
                }
            }
        };
    </script>

跨域问题怎么解决？

协议、域名、端口，只要有一个不一样就表示跨域

//报这种错误肯定就是跨域的错误
Access to XMLHttpRequest at 'http://192.168.2.100:8888/ajax02/05.php' from origin 'http://127.0.0.1:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法：
1.代理： 这种方式是通过后台(ASP、PHP、JAVA、ASP.NET)获取其他域名下的内容，然后再把获得内容返回到前端，这样因为在同一个域名下，所以就不会出现跨域的问题
2.设置请求头 （不安全，一般不用）
只需要在服务器端头部加上下面两句代码：

response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

3.jsonp（只支持get请求不支持post请求）
用法：①dataType改为jsonp ②jsonp : “jsonpCallback”————发送到后端实际为http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx ③后端获取get请求中的jsonpCallback ④构造回调结构

$.ajax({
			type : "GET",
			async : false,
			url : "http://a.a.com/a/FromServlet?userName=644064",
			dataType : "jsonp",//数据类型为jsonp  
			jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
			success : function(data) {
				alert(data["userName"]);
			},
			error : function() {
				alert('fail');
			}
		});

//后端
        String jsonpCallback = request.getParameter("jsonpCallback");
		//构造回调函数格式jsonpCallback(数据)
		resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");

jQuery中的ajax

完整的jQuery调用：

$.ajax({
    type: 'post',
    url: './server/nav-json.php',
    data: {}, //请求需要传递的参数
    // 设置请求超时:单位为毫秒，如果服务器的响应时间超过指定的时候，请求失败
    timeout: 3000,
    dataType:'json', // 设置响应数据的格式  xml json text html script jsonp
    // 发送请求之前的回调
    beforeSend:function(){
        // 在这个回调函数中，如果return false,那么本次请求会中止
        // return false;
    },
    success: function() {
        //请求成功之后的回调
    }, 
    // 请求失败之后的回调
    error:function(e){
        if(e.statusText == "timeout"){
        	alert("请求超时，请重试");
        }
    },
    // 无论请求是成功还是失败都会执行的回调
    complete:function(){
    	console.log('实现一些全局成员的释放，或者页面状态的重置....');
    }
});

1.url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout:
要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:
要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

6.data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。

7.dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

8.beforeSend：
要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){
this; //调用本次ajax请求时传递的options参数
}
9.complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){
this; //调用本次ajax请求时传递的options参数
}

**10.success：**要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}

11.error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
this; //调用本次ajax请求时传递的options参数
}

12.contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}

14.dataFilter：
要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){
//返回处理后的数据
return data;
}

15.global：
要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified：
要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

17.jsonp：
要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:‘onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器。

18.username：
要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

19.password：
要求为String类型的参数，用于响应HTTP访问认证请求的密码。

20.processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

21.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

22.$.each()函数:
$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容

23.crossDomain : 跨域, 默认为 crossDomain : false, 在 type:“post”, dataType : json 情况下设置为 crossDomain : true