理解ajax

最新推荐文章于 2022-05-08 19:36:20 发布

远山眉

最新推荐文章于 2022-05-08 19:36:20 发布

阅读量385

点赞数

本文链接：https://blog.csdn.net/qq_43553067/article/details/88760221

版权

由于练手的demo用到了jquery封装的ajax，之前记录在本子上了，今天想整理一下~

1.ajax原理：

ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
这其中关键的一步是从服务器获得请求数据，要清除这个过程和原理。必须对XmlHttpRequest有所了解
XMLHttpRequest是一种支持异步请求的技术。也就是说javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
ajax最大的优点在于不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网特内容

2.XMLHttpRequest的属性

onreadystatechange 每次状态改变所触发事件的事件处理程序
responseText 从服务器进程返回数据的字符串形式
responseXML 从服务器进程返回的DOM兼容的文档数据对象
status 从服务器返回的数字代码。常见的有200 （已就绪） 404（未找到）
readyState 对象状态值
- “0”（未初始化）对象已建立，尚未调用open方法
- “1”（已初始化）对象已建立，已调用open方法，但尚未调用send方法
- “2”（发送数据）send方法已被调用，但是当前的状态及http头未知
- “3” (数据传送中) 已接收部分数据，但由于响应及http头不全，这时通过respondseXML和responseText获取部分数据会出现错误。
- “4”（完成）数据接收完毕，此时可以通过responseXML和responseText获取完整的回应数据。

3.XMLHttpRequest方法

send发送为POST请求
open(method,url,async)
- method 定义了向服务器提交数据的类型 post/get
- url 请求的url地址和传递的参数
- async 传输方式 false为同步，true为异步
- （如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。）
get和post的区别
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST没有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

GET和POST有一个重大区别：GET产生一个TCP数据包，而POST产生两个TCP数据包。
具体来说就是，对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200(返回数据)；
对于POST方式的请求，浏览器会先发送header，服务器响应100continue，浏览器再发送data，服务器响应200(返回数据)

这里强推一个写post和get区别的文章 https://www.oschina.net/news/77354/http-get-post-different?tdsourcetag=s_pctim_aiomsg

open（）方法和send（）方法的区别
参考 https://blog.csdn.net/nn131452zk/article/details/7762221

（1）用open可以指定get,post

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。
例如：
var url = “login.jsp?user=XXX&pwd=XXX”;
xmlHttpRequest.open(“GET”,url,true);
xmlHttpRequset.send(null);

（2）send发送为POST请求

此外，也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。
例如：
xmlHttpRequest.open(“POST”,“login.jsp”,true);
xmlHttpRequest.setRequestHeder(“Content-Type”,“application/x-www-form-urlencoded;charset=UTF-8”);
xmlHttpRequest.send(“user=”+username+"&pwd="+password);

4.jquery中的$.ajax

$.ajax({  
       type:'GET', //请求的类型,GET、POST等     
       url:'www.baidu.com',  //向服务器请求的地址。    
       contentType:'application/json', //向服务器发送内容的类型，默认值是：application/x-www-form-urlencoded
       dataType:'JSON',  //预期服务器响应类型   
       async:true, //默认值是true,表示请求是异步的，false是同步请求，同步请求会阻碍浏览器的其他操作（不建议使用）
       timeout:'5000', //设置本地的请求超时时间（单位是毫秒）    
       cache:true, //设置浏览器是否缓存请求的页面    
       success:function(result,status,XMLHttpRequest){//请求成功时执行的函数,result：服务器返回的数据，status：服务器返回的状态，                
       },
       error:function(xhr,status,error){  //请求失败时执行的函数                
       },
       complete：function(xhr,status){     //不管请求失败还是请求成功，都执行的函数                
       } 
})