浏览器和服务器之间,是通过HTTP协议通信的,那么如何发出一个HTTP请求呢,有以下几种方法:
方式 | 请求 | 缺点 |
---|---|---|
form | get/post | 会刷新或新打开一个页面 |
a标签 | get | 会刷新或新打开一个页面 |
img标签 | get | 只能以图片形式展现 |
link标签 | get | 只能以css或favicon形式展现 |
script标签 | get | 只能以脚本形式运行 |
以上方法要么就只能以get方式发出请求,要么就会刷新页面,那如何能够使用两种方式请求又不会刷新页面呢?那就是AJAX
AJAX(Asynchronous JavaScript And XML)指的是通过JavaScript的异步通信,从服务器中获取数据,再更新当前页面部分,不用刷新整个网页
包括以下四个步骤:
- 创建XMLHttpRequest实例对象
- 发出HTTP请求
- 服务器返回数据
- 解析并更新局部页面
用法:
XMLHttpRequest是一个构造函数,可以使用new命令生成实例对象:
let request= new XMLHttpRequest()
生成实例之后可以使用open()方法发送请求,参数必须包括请求方式和URL:
request.open('GET', '/xxx')
通过send()方法发送数据,参数可以为空:
request.send(data)
我们需要监听通信状态,通过readyState属性,一旦状态变化就会触发readystatechange
事件:
request.onreadystatechange = function () {}
完整的写法:
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('请求成功')
console.log(request.responseText)
} else {
console.log('请求失败')
}
}
}
XMLHttpRequest实例属性
readyState
onreadystatechange
response
responseType
responseText
responseXML
responseURL
status
statusText
XMLHttpRequest实例方法
open()
send()
setRequestHeader()
getResponseHeader()
getAllResponseHeaders()
abort()
注意,AJAX 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求,就会报错。
跨域解决方案:CORS(Cross-Origin Resource sharing 跨源资源分享)
JSON
现在,服务器返回的大多是 JSON 格式的数据,很少使用 XML 格式。JSON是一门语言,是一种轻量级的数据交换格式。
JSON模仿了JS的数据类型与结构,其中数据类型没有function和undefined,其它的与JS一样。结构包括两种:无序的“键/值”对的集合(类似对象),值的有序列表(类似数组)
response.setHeader('content-Type', 'text/json;charset=utf-8')
response.end(`
{
"note":{
"to": "A",
"from": "B",
"heading": "打招呼",
"content": "hi"
}
}
`)
注意:JSON中的string类型必须用双引号括起来
JSON.parse() 用于将符合JSON语法的字符串转换为JS中的对象