Ajax的自我总结

最新推荐文章于 2021-10-14 20:42:36 发布

柿子酱GS

最新推荐文章于 2021-10-14 20:42:36 发布

阅读量103

点赞数

分类专栏：学习文档文章标签： ajax

本文链接：https://blog.csdn.net/weixin_45371171/article/details/109966240

版权

学习文档专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

浏览器在接收到服务器数据后，两种表现形式：

浏览器全局刷新：服务端返回得数据，将浏览器内存中得原有得数据。进行更新，此时浏览器展示给用户的只能响应的结果，无法同时展示请求发送之前的内容。
浏览器局部刷新：服务端返回的数据，只会对浏览器部分[标签]的内容进行更新，此时浏览器既可以展示得到数据同时也可以展示发送请求之前绝大部分内容。

原因：

全局刷新：如果发送请求时，是由浏览器直接向服务端发送请求，此时服务端将响应结果也直接推送到浏览器的内存中，导致浏览器内存中原有的数据，将会被统统覆盖掉。
局部刷新：在发送请求时，并不是由浏览器直接向服务端发送请求，是由浏览器委托一个[异步请求对象]向服务端发送请求，此时服务端将响应结果推送给[异步请求对象]，浏览器内存中内容并没有被覆盖掉，最后[异步请求对象]将得到数据更新到浏览器中指定标签上。

Ajax技术开发步骤

在浏览器内存中，创建一个[异步请求对象]
为[异步请求对象]设置[工作状态监听器]，来帮助浏览器在何时的时机从[异步请求对象]读取服务端返回的请求数据。
初始化[异步请求对象],(请求方式(post/get)，请求地址，同步或异步标识）
命令[异步请求对象]发送请求
通过[工作状态监听器]，在何时时机得到[工作状态监听器]返回的数据对浏览器指定的标签内容进行更新，从而实现[局部率先你效果]

[异步请求对象]的工作状态：5种

[异步请求对象]的工作状态保存在[readyState]属性
readyState 值状态

0 [异步请求对象]已经被创建完毕
1 [异步请求对象]已经被初始化完毕
2 [异步请求对象]已经被请求发送出去，此时服务端应该正在处理这个请求
3 [异步请求对象]已经接受到了服务端返回的响应数据，[异步请求对象]正在翻译接收的数据
4 [异步请求对象]已经将得到数据翻译为javascript脚本数据，这个数据是可以直接拿来使用

异步请求与同步请求区别

xmlHttp.open(“get”,"/myWeb/one",异步请求/同步请求)；

异步请求：在[异步请求对象]工作期间，浏览器处于工作状态，此时浏览器不需要等待[异步请求对象]返回数据xmlHttp.open(“get”,"/myWeb/one",true)；
同步请求：在[异步请求对象]工作期间，浏览器处于等待状态，此时浏览器会等到[异步请求对象]返回数据后，才会坐其他的事情。xmlHttp.open(“get”,"/myWeb/one",false)；

局部刷新好处：

增加服务的质量
由于不需要服务端将整个网页推送到用户的浏览器上，极大减少服务端工作压力

$.ajax()使用

需要得到json格式参数对象
json格式参数对象

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
context	为所有 AJAX 相关的回调函数规定 “this” 值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
success(result,status,xhr)	当请求成功时运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest 对象的函数。

样例：

var parse={ type：指定异步请求对象使用的请求方（post/get）
    	  [type属性可以写]，默认的请求方式get
    	   url：指定本次请求的地址，必填属性 
    	   data：填写请求参数，可以不写
 	       data:="dname=sale&deptno=10"
           data:={dname:"sales",deptno:10}"
           dataType：设置要求服务端返回的数据类型。 		dataType属性可以不写，默认服务端返回的是一个String
           dataType:"text",要求服务端返回一个String
    	   dataType:"json",要求服务端返回一个json格式对象
    	   success：指定一个函数，负责将异步请求对象得到数据进行读取，将读取的数据更新到   指定的标签，必填属性
           error：指定一个函数，这个函数在本次请求响应失败时被触发
          }

实例：

$.ajax({
    type: 'GET',
    url: "/app/myParticipation/selectBizActivityByUserId",//url
    data: {"pageNum": page, "pageSize": size},
    dataType: 'json',
    beforeSend: function (XMLHttpRequest) {
        XMLHttpRequest.setRequestHeader("token", localStorage.getItem("token"));
        //请求前的处理,可以携带token等请求头部信息
    },
    success: function (data) {
    },
    error: function (xhr, type) {
    }
});

post提交的四种常见类型：

application/x-www-form-urlencoded:浏览器原生form表单。ajax提交数据时的默认值。提交数据按照key=val&key=val进行编码
multipart/form-data:
使用表单上传文件时，必须让form表单的encotype等于multipart/form-data
application/json: 用来告诉服务端消息主体时序列化后的json字符串。
text/xml: 它是一种使用HTTP作为传输协议，xml作为编码方式的远程调用规范。
详情请自行查阅

Get/Post提交区别

GET提交：请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，多个参数用&连接；例如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0
%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：
%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
POST提交：把提交的数据放置在是HTTP包的包体中。上文示例中红色字体标明的就是实际的传输数据
因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变
传输数据的大小：首先声明：HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。而在实际开发中存在的限制主要有：
GET:特定浏览器和服务器对URL长度有限制，例如IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。因此对于GET提交时，传输数据就会受到URL长度的限制。
POST:由于不是通过URL传值，理论上数据不受限。但实际各个WEB服务器会规定对post提交数据大小进行限制，Apache、IIS6都有各自的配置。
安全性：
POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这
里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为一是登录页面有可能被浏览器缓存，二是假如其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击
Http get,post,soap协议都是在http上运行的
1）get：请求参数是作为一个key/value对的序列（查询字符串）附加到URL上的查询字符串的长度受到web浏览器和web服务器的限制（如IE最多支持2048个字符），不适合传输大型数据集同时，它很不安全
2）post：请求参数是在http标题的一个不同部分（名为entity
body）传输的，这一部分用来传输表单信息，因此必须将Content-type设置为:application/x-www-form-urlencoded。post设计用来支持web窗体上的用户字段，其参数也是作为key/value对传输。但是：它不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则。
3）soap：是http post的一个专用版本，遵循一种特殊的xml消息格式 Content-type设置为: text/xml 任何数据都可以xml化

简化版

    $.get(
       "url",
       "请求参数"/{参数名：值},
       "dataType"
    )
  	$.post(
       "url",
       "请求参数"/{参数名：值},
       "dataType"
    )

不建议长期使用简化版：

由于浏览器安全方面的限制，大多数 “Ajax” 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。
如果由 jQuery.post() 发起的请求返回错误代码，那么不会有任何提示，除非脚本已调用了全局的 .ajaxError()方法。或者对于 jQuery 1.5，jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。