AJAX
2018-10-24 本文已影响0人
阿龙哟
浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。
AJAX具体步骤如下：
1.创建XMLHttpRequest实例
2.发出HTTP请求
3.接收服务器传回的数据
4.更新网页数据
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
if(xhr.status === 200){
console.log(xhr.responseText)
}
else{
console.error(xhr.responseText)
}
}
}
xhr.onerror = function(e){
console.err(xhr.statusText)
}
xhr.open('GET','/local',true)
xhr.send(null)
form表单发送请求
GET请求
<form action="/xxx" method='get'>
<input type="password" name='password'>
<input type="submit">
</form>
image.png
image.png
image.png
post请求 请求行 请求头 请求体
image.png
image.png
a 标签发送请求 默认get请求
<a id = x href="/xxx">click</a>
<script>
setTimeout(()=>{
x.click()
},3000)
</script>
img 发送请求
var image = document.createElement('img')
image.src='/xxx'
document.body.appendChild(image)
image.onload = function(){
console.log('s')
}
image.onerror = function(){
console.log('f')
}
image.png
用link发送请求
var link = document.createElement('link')
link.rel='stylesheet'
link.href='/xxx'
document.head.appendChild(link)
image.png
用script发送请求
var script = document.createElement('script')
script.src = '/xxx'
document.head.appendChild(script)
image.png
总结 发送请求的方式
用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行
AJAX应运而生
AJAX:异步的JavaScript和XML
1.使用XMLHttpRequest发送请求
2.服务器返回XML格式的字符串
3.js解析XML,并更新局部页面
服务器返回的永远都是字符串
tips
在控制台中可以粗略获得代码执行的时间
console.time()
var a = 1
console.timeEnd()
VM145:3 default: 0.014892578125ms
ajax
btn.addEventListener('click',(e)=>{
let xhr = new XMLHttpRequest()
xhr.open('GET', '/xxx')
xhr.send()
})
以前ajax后端返回的都是xml文档
if(path === '/xxx'){
response.statusCode = 200
response.setHeader('Content-Type', 'text/xml')
response.write(`
<node>
<to>小姑</to>
<from>阿龙</from>
<heading>打招呼</heading>
<body>你好</body>
</node>
`)
response.end()
}
前台处理
btn.addEventListener('click', (e) => {
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
console.log('请求响应完毕了')
if (xhr.status === 200) {
console.log('请求成功')
console.log(xhr.responseText)
let parser = new DOMParser()
let xmlDoc = parser.parseFromString(xhr.responseText,"text/html")
let title = xmlDoc.getElementsByTagName('heading')[0].textContent
console.log(title)
} else if(xhr.status >= 400){
console.log('请求失败')
}
}
}
xhr.open('GET', '/xxx')
xhr.send()
})
处理xml核心语句
let parser = new DOMParser()
let xmlDoc = parser.parseFromString(xhr.responseText,"text/html")
let title = xmlDoc.getElementsByTagName('heading')[0].textContent
因为处理XML还要涉及到非人类的dom操作，已经基本上被淘汰了，现在都是用JSON了
JSON 是一门新的语言 数据交换语言
JSON VS JS
1.JSON 没有抄袭function和undefined
2.JSON的字符串收尾必须是"
image.png
只有域名+协议+端口一模一样才允许发AJAX请求
跨域：
1.JSONP
2.CORS Cross-Origin Resource Sharing
只需要加一句话
response.setHeader('Access-Control-Allow-Origin','http://frank.com:8001')
让服务器知道这个地址和我是一伙的
