AJAX

AJAX:异步的JavaScript和XML

历史

发请求

1.form需刷新页面 get、post
2.a标签需刷新页面 get
3.img 必须传图片格式，以图片形式展示 get
4.link 只能以CSS/favicon形式展示 get
5.script，只能以脚本形式运行 get
需要一个万能的发送请求方法

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

AJAX

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

let request = new XMLHttpRequest()                 //创建一个对象
request.open('GET',  '/xxx')                       //初始化一个request请求
request.onreadystatechange = ()=>{
    console.log(request.readyState)
    if(request.readyState === 4){
       console.log('请求完毕')
       if(request.status >= 200 && request.status >= 300){      //300会重新发送请求
            console.log('请求成功')
            console.log(request.responseText)      //读取响应体
        }else if(request.status >= 400){
            console.log('请求失败')
        }
    }      
}                                                     
request.send()                                      //发送

GET POST DELETE PUT
XMLHttpRequest对象的属性：
1.onabort 被中断
2.onerror
3.onreadystatechange
4.readystate
0 UNSENT open()还未被调用
1 OPENED send()还未被调用
2 HEADERS_RECEIVED send()方法已被调用，响应头和响应状态已返回
3 LOADING 响应体(响应的第四部分)正在下载，responseText中已获取部分数据
4 DONE 整个请求已完成，响应下载完毕

可操作返回的xml文件

image.png
image.png

JSON

各种类型的写法：

image.png
image.png

JS VS JSON
undefined 无
function fn() {} 无
null null
['name','age'] ["name","age"]
{name: 'frank'} {"name": "frank"}
'frank' "frank"

1.JSON 没有 function和undefined
2.JSON的字符串收尾必须是"双引号"

处理返回的json数据

string = request.responseText
let obj = window.JSON.parse(string)        //把符合json语法的字符串转换成js对象
console.log(obj.note)

同源策略

ajax跨域问题（请求成功，但看不到response，request.readystatus === 0）
同源策略：浏览器要求只有 协议+端口+域名 一模一样才允许发AJAX请求
'http://baidu.com' 和'http://www.baidu.com'不一样

为什么要求同源？

image.png
使用CORS可以破例同源策略——跨域
CORS——Cross-Origin Resource Sharing跨站资源共享
在B网的服务器接口里写：
response.setHeader('Access-Control-Allow-Origin', ‘http://A.com’) //A可向B发送AJAX请求
response.setHeader('Access-Control-Allow-Origin', '*') //所有网站都可

JSONP只能get
AJAX很安全