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,这两种方式下一篇儿再写吧。
领取专属 10元无门槛券
私享最新 技术干货