原生ajax和jQuery中的ajax

傷城~ 2023-07-13 08:27 15阅读 0赞

**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请求 ##

## 跨域问题怎么解决？ ##

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

//报这种错误肯定就是跨域的错误
    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