AJAX

AJAX：异步的javascript和XML

技术点：
１．使用XMLHTTPRequest发请求
２．服务器返回XML格式的字符串　　//当然我们现在都在用json
３．JS解析XML，并更新局部页面

XMLHttpRequest 的实例属性:
1.属性readyState的值为４表示请求完成
2.XMLHttpRequest.onreadystatechange属性指向一个监听函数。实例的readyState属性变化，就会执行这个属性
3.XMLHttpRequest.responseText属性返回从服务器接收到的字符串
4.XMLHttpRequest.status属性返回一个整数，表示服务器回应的 HTTP 状态码。

请使用原生JS来发送AJAX请求

//html
<button id="myButton">click</button> 

//js
myButton.addEventListener('click',(e)=>{
  let request = new XMLHttpReuest()
  request.open('GET','/xxx')
  request.send()
  request.onreadystatechange = ()=>{
    if(request.readyState == 4){
      if(request.status >= 200 && request.status < 300){
        let string = request.reponseText
        let obj = JSON.parse(string)
      }
    }
  }
})

form和AJAX的区别：

比如我们通过form，可以给百度发get请求，而用AJAX就会失败。
因为原页面用form提交到另一个域名后，原页面的脚本无法获取新页面的内容。所以浏览器认为这是安全的。而AJAX是可以读取响应内容的，因此浏览器不允许这么做。其实在这个例子中，就可以看到，请求已经发出去了，只是拿不到响应而已。
所以浏览器这个策略的本质是，一个域名的JS，在未经允许的情况下，不得读取另一个域名的内容。但是浏览器并不组织你向另一个域名发送请求。

//通过from
<form action="https://www.baidu.com" method='GET'>
  <input type="password" name="password">
  <input type="submit">
</form>
//通过ajax
myButton.addEventListener('click',(e)=>{
  let request = new XMLHttpRequest()
  request.open('GET','https://www.baidu.com')
  request.send()
  request.onreadystatus = ()=>{
    
  }
})

浏览器一个重要的特性：

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

CORS（跨域资源共享）

MDN上的解释：它使用额外的 HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

总结为一句话就是：让你想访问的后台服务器，加一句话，给你一个权限，让你可以访问。

和JSONP的帖子中一样，我们在本地分别启动：http://hua.com:8000,http://zhen.com:8001，现在我们已经启动了两个服务，
我们现在在hua.com想访问zhen.com中的数据。在AJAX中已经设置request.open('get','http://zhen.com:8001/xxx')，最开始访问肯定是失败的啊。因为你的url是hua.com:8000，而你想访问的是另一个url，所以拿不到资源。

那么我们在你想访问的zhen.com:8001的服务器中进行设置：
添加HTTP响应头，response.setHeader('Access-Control-Allow-Origin','http://hua.com:8000')，就相当于告诉服务器，是朋友，别拦我。这样，我们就可以从hua.com拿到zhen.com的资源了。