AJAX:异步的 JavaScript 和 XML
AJAX使用标志：
使用 XMLHttpRequest 发请求
服务器返回 XML 格式的字符串(现已用JSON代替XML)
JS 解析 XML，并更新局部页面
AJAX 就是用 JavaScript 发请求
1.发请求的五种方法
1.form 可以发请求（get/post），但会刷新页面或新开页面;post请求无查询参数
2.a标签可以发 get 请求，但会刷新页面或新开页面
3.img标签可以发 get 请求，但是只能以图片的形式展示
4.link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
5.script 可以发 get 请求，但是只能以脚本的形式运行
2.readyState的状态
值 状态 描述
0 UNSENT 代理被创建，但尚未调用 open() 方法。
1 OPENED open() 方法已经被调用。
2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
3 LOADING 下载中； responseText 属性已经包含部分数据。
4 DONE 下载操作已完成/请求操作已经完成。
3.使用 XMLHttpRequest
myButton.addEventListener('click', (e)=>{
//使用AJAX
let request = new XMLHttpRequest()//创建对象
request.open('get', '/xxx') // 配置request--配置对象
request.send()//发送对象
request.onreadystatechange = ()=>{//监听对象
if(request.readyState === 4){
console.log('请求响应都完毕了')
console.log(request.status)
if(request.status >= 200 && request.status < 300){
console.log('说明请求成功')
console.log(typeof request.responseText)
console.log(request.responseText)
let string = request.responseText
// 把符合 JSON 语法的字符串
// 转换成 JS 对应的值
let object = window.JSON.parse(string)
// JSON.parse 是浏览器提供的
console.log(typeof object)
console.log(object)
console.log('object.note')
console.log(object.note)
}else if(request.status >= 400){
console.log('说明请求失败')
}
}
}
})
响应的第四部分是字符串，可以用 JSON 语法表、 HTML 语法、 CSS 语法、 JS 语法或其它语法
// 后端代码
}else if(path==='/xxx'){
response.statusCode = 200
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8001')
response.write(`
{
"note":{
"to": "张三",
"from": "李四",
"heading": "问候",
"content": "hello"
}
}
`)
response.end()
JSON
-
JSON 简介见网址 json.org
-
JS 是一门语言，JSON 是另一门语言；后者借鉴前者。
-
同源策略
只有 协议+端口+域名 一模一样才允许发 AJAX 请求
同域名、同端口、同协议视为同一个域，同一个域内的脚本仅限于本域。
本域内只能访问本域内的资源，无法访问其它域的资源。
同源策略是浏览器最核心也最基本的安全功能。
如：
http://baidu.com 不可以向 http://www.baidu.com 发 AJAX 请求
http://baidu.com:80 不可以向 http://baidu.com:81 发 AJAX 请求
-
突破同源策略（跨域）--后端
1.CORS 跨域
response.setHeader('Access-Control-Allow-Origin', 'http://xxx.com:xxx')2.JSONP
AJAX 的所有功能
Javascript操作请求与响应
客户端的JS发起请求（浏览器上的）
服务端的JS发送响应（Node.js上的）
1.Javascript可以任意设置请求header
参考请求格式
第一部分 request.open('get', '/xxx')
第二部分 request.setHeader('content-type','x-www-form-urlencoded')
第四部分 request.send('a=1&b=2')
2.Javascript可以任意获取响应header
参考响应格式
第一部分 request.status （）/ request.statusText（）
第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
第四部分 request.responseText
