AJAX入门

如何发请求？

• 用 form 可以发请求，但是会刷新页面或新开页面
• 用 a 可以发 get 请求，但是也会刷新页面或新开页面
• 用 img 可以发 get 请求，但是只能以图片的形式展示
• 用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
• 用 script 可以发 get 请求，但是只能以脚本的形式运行

有没有什么方式可以实现

1. get、post、put、delete 请求都行
2. 想以什么形式展示就以什么形式展示

• 微软的突破 IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。 随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

3. AJAX Jesse James Garrett 将如下技术取名叫做 AJAX：异步的 JavaScript 和 XML
   • 使用 XMLHttpRequest 发请求
   • 服务器返回 XML 格式的字符串
   • 解析 XML，并更新局部页面

不过我们现在更多的统一使用 JSON 代替了 XML

4. 如何使用 XMLHttpRequest

let request = new XMLHttpRequest();
request.open('GET', '/xxx');
request.send();
request.onreadystatechange = () => {
  if( request.readyState === 4 ){
    if( request.status >= 200 && request.status <= 300 ){
      console.log('说明请求成功');
      let string = request.responseText;
      let object = JSON.parse(string)
    }else if( request.status >=400 ){
      console.log('说明请求失败');
    };
  };
};

对于HTTP来说，响应的第四部分始终都是字符串。可以用 JSON 语法表示一个对象，也可以用 JSON 语法表示一个数组，还可以用 XML 语法，还可以用 HTML 语法，还可以用 CSS 语法，还可以用 JS 语法，还可以用我自创的语法

5. API

1. request.onreadystatechange  //监听请求状态的变化
2. request.readyState === 1  //request.open()已经完成
3. request.readyState === 2  //request.send()已经完成
4. request.readyState === 3  //request.responseText正在下载
5. request.readyState === 4  //响应完成
6. request.status  //HTTP状态码
7. var string = request.responseText  //响应的内容
8. var value = JSON.parse(request.responseText)  //把符合JSON语法的字符串转换成JS，解析响应返回的内容
9. value.node   //若value是对象，这就是对象里内容
10. value.node.name  //对象里的name的值

JSON是什么

JSON 是一种轻量级的数据交换格式；（JS 是一门语言，JSON 是另一门语言，JSON 这门语言抄袭了 JS 这门语言）

• JSON 没有 function、undefined 和 symbol
• JSON 的字符串首尾必须用双引号
• JSON 没有变量和原型链

JSON 值可以是：

• number
• string（在双引号中）
• boolean（true 或 false）
• array（在方括号中[“a”,”b”]）
• object（在花括号中 {“name”:”xxx”}）
• null

同源策略

form、img、script 等上面提到的请求方式，是可以对别的域名发送请求的。 但用 AJAX 不能对别的域名放送请求，只有协议、域名、端口号一摸一样才允许发送 AJAX 请求。

为什么 form 表单提交没有跨域问题，而 AJAX提交有跨域问题？

因为原网页用 form 提交到另一个域名后，原网页的脚本无法获取新页面中的内容，所以浏览器认为这是安全的； 而 AJAX 是可以读取响应内容的，因此浏览器不能允许你这样做。 其实请求已经发送出去了，只是拿不到响应而已。所以浏览器这个策略的本质是，一个域名的 JS 在未经允许的情况下，不能读取另一个域名的内容，但浏览器并不能阻止你向另一个域名发送请求。

CORS 跨域

AJAX 可以通过 CORS 发送请求到别的网站 跨站资源共享：Cross-Origin Resource Sharing

• A网站的前端程序员打电话告诉B网站的后端程序员
• A前: 我想和你的网站进行交互, 你同意吗?
• B后: 我同意

然后B后端程序员就在后台代码(响应内容)写上这一句代码:

response.setHeader('Access-Control-Allow-Origin', 'www.aaaaa.com')

这句的意思可以理解为：CORS 告诉浏览器，www.aaaaa.com 和我是一家的，别阻止它。