美文网首页
ajax请求原理

ajax请求原理

作者: 呼呼呼lys | 来源:发表于2017-02-09 07:16 被阅读0次

ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。

1、创建

1.1、IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用: var oAjax = new XMLHttpRequest();

1.2、IE6及其之前的版本中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0;个人感觉太麻烦,可以直接使用下面的语句创建: var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

2、连接和发送

2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求(同步请求的情况极少,至今还没用到过);

2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;

2.3、POST 请求中,在发送数据之前,要设置表单提交的内容类型;

互联网 小孩抽 无纺布制袋机 蝴蝶犬领养 锡纸花甲粉加盟 种植头发多少钱

2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码,实际上在参数列表”key=value”的形式中,key 和 value 都需要进行编码,因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串,这样是为了拒绝缓存,每次都直接请求到服务器上。

encodeURI() :用于整个 URI 的编码,不会对本身属于 URI 的特殊字符进行编码,如冒号、正斜杠、问号和井号;其对应的解码函数 decodeURI();

encodeURIComponent() :用于对 URI 中的某一部分进行编码,会对它发现的任何非标准字符进行编码;其对应的解码函数 decodeURIComponent();

3、接收

3.1、接收到响应后,响应的数据会自动填充XHR对象,相关属性如下

responseText:响应返回的主体内容,为字符串类型;

responseXML:如果响应的内容类型是 "text/xml" 或 "application/xml",这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型;

status:响应的HTTP状态码;

statusText:HTTP状态的说明;

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下

0-未初始化,尚未调用open()方法;

1-启动,调用了open()方法,未调用send()方法;

2-发送,已经调用了send()方法,未接收到响应;

3-接收,已经接收到部分响应数据;

4-完成,已经接收到全部响应数据;

只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。

3.3、在readystatechange事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status 是状态码,状态码以2开头的都是成功,304表示从缓存中获取,上面的代码在每次请求的时候都加入了随机数,所以不会从缓存中取值,故该状态不需判断。

4、ajax请求是不能跨域的!

相关文章

  • PHP判断ajax请求:HTTP_X_REQUESTED_WIT

    PHP判断ajax请求的原理: 在发送ajax请求的时候,我们可以通过XMLHttpRequest这个对象,创建自...

  • 2017.10.31

    ajax原理 ajax的核心 GET 情况下 创建ajax链接 打开链接 发送请求 接收响应 ajax状态码: 0...

  • 2019-06-17

    Ajax原理 创建对象 回调函数主体 初始化请求 发送请求 设定回调函数 经典方式 $.ajax({ url:"发...

  • ajax请求原理

    ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous ...

  • ajax优缺点分析

    Ajax的原理: ajax的工作原理就是通过XmlHttpRequest对象来向服务器发出异步请求,从服务器中获得...

  • Ajax的步骤及其原理

    ajax是实现前端异步请求非常重要的方法。 下面列出ajax的全部参数 Ajax原理和XmlHttpRequest...

  • Ajax封装(jQuery风格)

    AJAX原理: ajax利用XMLHttprequest()方法创建一个对象,之后利用open()方法进行请求属性...

  • ajax

    ajax的工作原理 Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数...

  • 基于ajax项目封装

    ajax 实现的基本原理是 XMLHttpRequest 或 fetch api。简单的 ajax 请求,只需要几...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

网友评论

      本文标题:ajax请求原理

      本文链接:https://www.haomeiwen.com/subject/yifiittx.html