AJAX初探

最新推荐文章于 2022-12-14 21:08:38 发布

原创最新推荐文章于 2022-12-14 21:08:38 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX #跨域 #同源策略

web前端同时被 2 个专栏收录

39 篇文章

订阅专栏

Node-js

4 篇文章

订阅专栏

本文介绍了AJAX的基本概念及其使用方法，探讨了AJAX如何帮助前端开发者实现更丰富的网页交互效果。同时，文章还讲解了浏览器的同源策略限制及如何通过设置解决跨域问题。

AJAX初探

发请求的几种方式

form表单可以发GET请求和POST请求，不支持其它的请求方式比如PUT，DELETE等。并且会刷新当前页面或者新开一个页面。
a标签只能发GET请求。同样会刷新当前页面或者新开页面。
img标签只能发GET请求。并且只能以图片的形式展示。
link标签只能发GET请求。并且只能以css或者favicon形式展示。
script标签只能发GET请求。并且只能以脚本的形式运行。
在这些发送请求的方式中我们可以看到诸多限制，众所周知，程序员很讨厌这些限制。
能不能有一个方法，能发送GET，POST，PUT，DELETE等各种请求，并且像img、link等发送请求的方式一样不需要刷新当前页面或者新开页面，还能不受表现形式的限制想以什么形式展示就以什么形式展示。。。？

AJAX解决的问题&如何使用AJAX

是的，AJAX帮我们做到了。
微软的IE5在JS中引入了ActiveX对象（API），从而使得JS可以直接发http请求，不像之前必须要通过生成其它的标签来发请求。此后其它浏览器跟进了，取名XMLHttpRequest，并被W3C纳入规范。
AJAX用到的，就是XMLHttpRequest。AJAX全称是Asynchronous JavaScript and XML，异步的JS和XML。
AJAX的使用：
1. 用XMLHttpRequest发请求。
2. 服务器端返回XML格式的字符串。
3. JS解析返回的XML，并局部更新页面。
事实上，到现在，服务器端返回的更多的并不是xml格式的字符串，所以AJAX的精髓在于使用XMLHttpRequest发请求。本身它的出现也是用来解决发请求这个问题的。
让我们来写一个简单的AJAX请求。

let request = new XMLHttpRequest()  //先创建一个XMLHttpRequest的实例
request.onreadystatechange = function(){
  if(request.readyState === 4){
    console.log('加载完毕')
  }
}
request.open('POST', '/url')  //初始化这个实例
request.send()  //发送请求

这里readyState有5个值

值	状态	描述
0	UNSENT	代理被创建但是还没有被初始化
1	OPENED	已经初始化了（调用了open方法）
2	HEADERS_RECEIVED	send方法已经调用，并且已经获得了服务器返回的头部和状态码
3	LOADING	下载中（从服务器下载数据并不是整个下下来，而是下下来多少responseText里边就有多少，所以有了这个状态）
4	DONE	操作已经完成。并不意味着成功，而是你现在才知道它是成功还是失败。

我们可以通过request.responseText得到服务器给我们返回的字符串。然后使用它给我们返回的字符串对页面进行局部刷新。

JSON是什么鬼

为什么要说JSON呢…..上文中提到服务器给我们返回字符串，这个返回的字符串很多都是符合JSON语法格式的字符串，然后使用window.JSON.parse()方法将符合JSON语法的字符串转换成JS对应的值。
JSON是一门与JS相似的新的语言。
与JS不同的是，JSON没有undefined和function。并且JSON中string类型的值必须要用双引号引起来。也因此，JSON中对象里边的key的类型是string，所以key必须要加双引号。

AJAX带来的问题&如何解决问题

AJAX虽然很好用，但是随之而来的是浏览器的同源策略问题。浏览器的同源策略限制AJAX向不同源的网站发送请求。
所谓同源，是指协议，域名，端口号一模一样的两个页面。缺一不可。所以http://www.baidu.com和http://baidu.com不同源，http://www.baidu.com:80和http://www.baidu.com:81也不同源。
有人不让我们轻易访问，但是想想办法总还是能访问的….所谓上有政策下有对策是也。
同样的，比如你现在是http://wcy.com:8080，而你想要访问http://whw.com:8080的话，那你就需要与whw.com的后端交流一下，让他给你留一条活路….嗯 ~ 好了不开玩笑，在whw.com的后台代码中加上response.setHeader('Access-Control-Allow-Origin', 'http://wcy.com:8080')，这样wcy.com就可以向whw.com发起AJAX请求啦。
如果没有那行允许访问的代码的话，你发请求可以发送成功，状态为200，但是服务器不会给你任何响应，request.readyState的值为0。
所以，由于同源策略，不同网站之间没法发送AJAX请求（JSONP不受同源策略限制），但是我们可以手动告诉服务器不要阻止自己人的访问。