JavaScript之Ajax

Ajax在前端开发中有着举足轻重的地位,关于Ajax的使用和注意事项一直是一个重要的话题,借此机会,本文希望对Ajax做一个全面的总结,彻底揭开Ajax的神秘面纱。

一.什么是Ajax

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

二.Ajax的原生写法

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

2.实现流程

创建 XMLHttpRequest对象——>打开请求地址,初始化数据——>发送请求数据——>监听回调函数状态——>收到服务器返回的应答结果。

下面用具体的代码进行解释:

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

(3).关于status 由服务器返回的 HTTP 状态代码,200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。(后面会有http状态码的详细解读)

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

四.GET or POST?

作为Ajax最常用的两种数据提交方式,GET和POST有着自己的特点和适用场景,正确区分GET和POST的不同并根据实际需要进行选用在开发中十分重要,简单但是关键!

先上一张GET 和 POST的比较图,从这张图中可以看出两者之间的差别:

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

七.JSON和JSONP

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

ajax很好,但不是万能的,ajax的请求与访问同样会受到浏览器同源策略的限制,不能访问不同主域中的地址。所以,为了解决这一问题,实现跨域访问,有很多种方式,上述提到的jsonp就是一种流行的方式,还有其他一些方式,我在这里就不展开说了,只是想说明ajax的使用也是有条件的,任何技术的实现都不会是没有限制的。跨域访问时一个很重要的知识点,之前专门写过一篇关于跨域访问的总结,还挺详细的,可以移步查看: javascript中实现跨域的方式总结

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

十.不可忽视的HTTP头文件

http请求中的一个重要关注点就是请求头和响应头的内容,从这两个头文件中可以看出很多东西,当我们用发送一个ajax请求的时候,如果没有达到预期的效果,那么就需要打开浏览器的调试工具,从NetWork中找到相应的ajax请求,再通过查看请求头和响应头的信息,大体会知道这次请求的结果是怎么样的,结合响应的主体内容,可以很快找到问题。所以学会看http的头文件信息是前端开发中必须掌握的一个技能,下面就来看看具体的头文件信息。

首先随便上一张sf中的完成一个搜索结果的http请求,可以从图中的右侧清楚看到请求头和响应头的内容,包括了很多个字段信息,这些字段信息就是我们需要掌握的知识点,下面挑出其中的重点字段进行分析。

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

1.请求头信息:

Accept:客户端支持的数据类型
Accept-Charset:客户端采用的编码
Accept-Encoding:客户端支持的数据压缩格式
Accept-Language:客户端的语言环境
Cookie:客服端的cookie
Host:请求的服务器地址
Connection:客户端与服务连接类型
If-Modified-Since:上一次请求资源的缓存时间,与Last-Modified对应
If-None-Match:客户段缓存数据的唯一标识,与Etag对应
Referer:发起请求的源地址。
不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

3.两者都可能出现的消息

Pragma:是否缓存(http1.0提出) Cache-Control:是否缓存(http1.1提出)

4.跟缓存相关的字段

(1) 强制缓存 expire 和 cache-control

(2) 对比缓存 Last-Modified 和 If-Modified-Since Etag 和 If-None-Match

不太理解Ajax的可以看下,前端工作笔记-关于Ajax的那些事的总结!

 

2.缺点:

  1. 无法进行操作的后退,即不支持浏览器的页面后退。
  2. 对搜索引擎的支持比较弱。
  3. 可能会影响程序中的异常处理机制。
  4. 安全问题,对一些网站攻击,如csrf、xxs、sql注入等不能很好地防御。
原文地址:https://www.cnblogs.com/guchengnan/p/9640043.html