原生Ajax

1、Ajax全称:(Asynchronous JavaScript+XML)

特点:能够向服务器请求额外的数据而无需卸载页面。

技术核心:XHR(XMLHttpRequest)对象。使用XHR对象获取数据,通过DOM将数据插入到页面中。

1.1 XHR用法:(0)创建XHR对象

(1)xhr.open() 启动一个请求以备发送

(2)发送一个请求

(3)给服务器发送请求后,会受到服务器的响应码服务器响应码:statusstatus:200 //表示成功status:304 //表示请求资源没有更改,可直接用浏览器中缓存的版本,(优化,缓存)status:404 //请求失败status:500 //服务器错误

(4)我们可以根据服务器返回的状态码,判断发送是否成功检查状态码:

注意:前面是发送的同步请求,大多数情况下是异步请求,即open方法的第三个参数是true

(5)利用xhr对象对服务器发送请求,我们可以检测XHR对象的readyState属性来监视当前请求/响应过程的阶段。

readyState有5个阶段,就readyState=4时是有用的,该阶段表示已经接收到全部响应数据,而且可以在客户端使用示例:注意:为保证浏览器兼容性,必须在open()之前指定onreadystatechange事件

(6)取消异步请求

1.2 HTTP头部信息(1)设置并发送自定义头部信息— —setRequestHeader

(2)获取某一头部信息— —getResponseHeader

(3)获取所有头部信息— —getAllResponseHeaders

1.3 GET请求get请求的一般url是这样的:http://xxxxxx?name1=value1&name2=value2注意:需要使用encodeURIComponent()对每个参数的key和value进行编码。(jQuery是封装好的,不需要手动编码)

1.4 POST请求1.4.1(1)post请求的数据是不包含在url上的,而是在request body上写上参数(key-value),当然你也可以在url上写一些东西。(2)如果用post的话,一般是要加上参数的,单纯查数据的话,可以写一个空的key-value,来达到查询的效果。

1.4.2用POST请求伪装成提交Web表单的请求:(1)将Content-Type头部信息设为application/x-www-form-urlencoded,即表单提交时的内容类型(2)将页面的表单数据进行序列化— —serialize()

1.5GET与POST之间的区别:(1)两个都是客户端向服务器提交访问请求(2)GET只允许ASCII字符,POST没有限制,可允许二进制数据、支持中文(3)Get数据包含在url中,不安全,post数据包含在报文中,不可见,安全(4)get数据容量有限制,post不限制(get,有一说是最大支持1024字节,其实也没有规定url的长度上限,post,PHP服务器最大限制一般是2MB)(5)对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据)。而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)。,这也是一般所说的get比post请求快一些的原因。

附:使用xhr请求的流程图(使用visio创建)

使用原生Ajax请求数据

(完)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180805G10H2S00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券