AJAX与发送请求

！！！ALAX是一种方法，不是新的技术，是可以通过JavaScript来实现的

如何发请求？

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

以上发送请求的方法或少都有一些缺陷，有没有更好的发送请求方法？IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被纳入 W3C 规范

XMLHttpRequest是浏览器创建的一个专门用来发送请求接口（对象），它包含如何发送请求以及接收响应内容的各种方法。他是一个对象。

AJAX概念

Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML

1.使用 XMLHttpRequest 发请求
2.服务器返回 XML 格式的字符串
3.JS 解析 XML，并更新局部页面
AJAX详细使用方法请移步阮一峰
如何使用 XMLHttpRequest
JS代码：

//XMLHttpRequest是浏览器给出的一个用来进行请求相关的接口
button.addEventListener('click',()=>{
    let request=new XMLHttpRequest();//s=声明一个请求对象

    request.open('GET', 'http://localhost:8001/xxx') //配置这个请求1.方式2.路径3.是否异步，默认异步。4.
    //open之后readystate已经变成了1
    request.send()//发送这个请求
    request.onreadystatechange = function () {
        console.log(request.readyState) //request.readyState返回请求的状态包括：0（open方法还未调用）1（send方法还未调用）2（send方法被掉用，已经获得响应头和状态码）3（正在下载响应体，responseText已经获得部分数据）4（整个请求已经完成）
        if (request.status >= 400) { //request.status返回状态码。
            console.log("请求失败")
        } else {
            console.log("请求成功了")
            //console.log(request.responseText)//响应第四部分的内容
            let string = request.responseText
            let object = window.JSON.parse(string)
            console.log(object)
        }
    } //请求的状态发生改变事件

})

后端服务器对应代码：

if (path == '/xxx'){
    response.statusCode = 200;
    response.setHeader('Content-Type', 'text/xml; charset=utf-8');
    response.setHeader('Access-Control-Allow-Origin','http://localhost:8888')
    response.write(`
    {
      "note":{
        "to":"friend",
        "from":"wangliuyong",
        "heading":"打招呼",
        "content":"hello"
      }
    }
    `);
    response.end();
  }

JSON —— 一门新语言

JSON语法格式
- JSON是一门新的语言，不是JavaScript，只是借鉴了JavaScript
- JSON vs js
1.JSON中没有function 和undefined，变量
2.JSON 的字符串必须是”
- ！！！服务器返回的永远是字符串（html内容的字符串，JSON格式的字符串，js格式的字符串）

JS定义了JSON对象，专门用来处理JSON格式的数据

window.JSON.parse() //用于将一个 JSON 字符串转换为 JavaScript 对象。
window.JSON.stringify() //用于将 JavaScript 值转换为 JSON 字符串。

浏览器的同源策略

1.同源：域名、协议、端口都是一样的称为同源，否则为非同源。
非同源可以发送请求的有：a,img,link,script,form.

只有协议+端口+域名一模一样才允许发 AJAX 请求

http://baidu.com 可以向 http://www.baidu.com 发 AJAX 请求吗 no
http://baidu.com:80 可以向 http://baidu.com:81 发 AJAX 请求吗 no

form提交到另一个域名之后，原页面无法获取页面的内容。所以浏览器认为这是安全的。
而AJAX是可以读取响应内容的，因此浏览器允许AJAX发送请求，但却不允许AJAX获取到相应的内容。浏览器的同源策略是：
一个域名的JS在未经允许的情况下，不得读取另一个域名的内容，但浏览器并不会阻止你想另一个域名发送请求。

不允许非同源的AJAX给另一个服务器发送请求，浏览器会拒绝。
AJAX只允许给同源的服务器发送请求，非同源服务器会响应成功，但浏览器会拒绝响应内容，响应成功了但是却收不到任何响应的内容。

浏览器必须保证
只有协议+端口+域名一模一样才允许发 AJAX 请求
CORS 可以告诉浏览器，我俩一家的，别阻止他

突破同源策略 === 跨域

jsonp可以动态的创建script来给非同源服务器发送请求，但是jsonp只能发送get请求，没有办法发送post及其他请求，这就造成了很大的局限性。
因此，变引入了CORS（Cross-Origin Resource Sharing）跨域来解决这个问题。只需要在后台服务器响应头中添加请求域名即可，就可以使用AJAX进行非同源网站之间的交流了。
同源策略：
和后端人员商量好，在我门请求的路径响应头里加上

response.setHeader('Access-Control-Allow-Origin','http://localhost:8001')
//这样就可以告诉浏览器不要阻止，请求方获取响应内容。

后端代码：

response.statusCode = 200;
    response.setHeader('Content-Type', 'text/xml; charset=utf-8');
    response.setHeader('Access-Control-Allow-Origin','http://localhost:8888')
    response.write(`
    {
      "note":{
        "to":"friend",
        "from":"wangliuyong",
        "heading":"打招呼",
        "content":"hello"
      }
    }
    `);
    response.end();