首页
学习
活动
专区
工具
TVP
发布

ajax整理,送给小伙伴

1.ajax介绍

名称:Ajax:异步的 JavaScript 和 XML;

特点:能够在不重新加载页面的情况下,局部刷新某些数据。

2.ajax原理

Ajax利用的是XMLHttpRequest对象。首先创建XHR对象的实例,如果浏览器支持XHR对象,则创建XHR的实例,否则创建IE的ActiveXObject对象,这里没有对IE7以及以下进行兼容。

分析需要用到的XHR对象相关内容:

1.方法

三个参数,method规定我们使用or方法。是我们使用这个方法访问的地址,可能是文件地址,也可能是文件地址+参数的形式。第三个参数表示是否异步,表示异步,如果不写,默认为。

2.

方法接受一个参数,即要求作为请求主体发送的数据(这里的请求主体,我个人理解是通过方式发送的请求,数据都是作为请求主体发送过去的)。如果不需要通过请求主题来发送数据,则必须要传入null。之所以说是要必须传入,是因为对于某些浏览器来说,这个参数是必须的,因此,为了避免不必要的麻烦,我们应该统一传入null。

3.

当我们将请求发送到服务器以后,服务器的响应会自动的填充XHR对象,相关的属性如下:

这里的status就是我们确定是否请求成功的标志,一般来说,如果status值为200,恭喜你,这次请求是成功的;值为404,说明你请求的地址有误;值为403,说明服务器已经收到了你的请求,但是很任性的选择了不搭理你,即我们经常听到的没有访问权限。如果返回的结果是500,那就是服务器挂了,直接去找后台小伙伴儿吧。

4.

前面也说了,使用ajax发送请求可以选择同步,但更多时候我们还是使用异步请求,这时候,此属性就排得上用场了。表示请求和响应过程中的各个阶段,一共有5个值,分别为:

由此,我们可以看到,通过监测和属性,就可以掌握到客户端是否能够取得响应以及何时接收了响应。

事件,在每次发生改变时,都会自动调用,因此我们可以这样写:

这里需要注意的是,readyStatechange事件要写在方法之前。

3.其他事项

GET&POST

GET应该是最常用的服务器请求类型,在拼接字符串时,一定要注意key和value都要一下,避免字符串的格式问题。

POST请求则需要我们添加属性为,模拟表单提交。曾经有一次提交时数据,就是忘了添加导致后台根本就获取不到数据。

FormData

FormData是XMLHttpRequest2级规范里面的一部分内容,它的作用是将表单数据进行序列化,当然我们也可以将我们定义的数据传入到FormData中。

FormData用法有两种:

通过方法,将数据填充到FormData中,另外一种:

直接将表单元素传入FormData,直接就可以获取到表单数据,并进行序列化。

FormData的另外一个作用就是不需要再写,XHR对象识别FormData的同时,会自动替我们加上请求头信息。

timeout超时设定

超时设定目的是防止因为各种因素,导致请求无限等待。这个就很简单了

4.跨域问题

在我开始进行前后台交互的时候,跨域问题真的恶心的一匹。不过,现在我们只需要在后台设置好

不推荐使用虽然与的效果相同,在是在一些情况下使用是会报错的。

当然,常见的跨域解决方式还有服务器代理和jsonp,这两种方式下一篇儿再写吧。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171212G0Z8TG00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券