AJAX包括以下几个步骤:
使用原生的XMLHttpRequest对象发出HTTP请求
得到服务器返回XML格式的字符串()
JS解析XML,并更新局部页面
语法
XMLHttpRequest对象
用来在浏览器与服务器之间传送数据。
1.var ajax = new XMLHttpRequest();
2.ajax.open(‘GET’, url, true);
// 向指定的服务器网址,发出GET请求。
readyState
表示XMLHttpRequest请求当前所处的状态。
readyState === 4 表示整个请求过程已完毕
onreadystatechange
指向回调函数,监听通信状态(readyState属性)的变化。
responseText
返回从服务器接收到的字符串,如果本次请求没有成功,该属性就会等于null
封装ajax()方法
<body>
<div id="box"></div>
<script src="ajax.js"></script>
<script>
var url='http://localhost:4000'
var data='username=jake&pwd=111'
// GTE 无参
ajax('GTE',url)
// GTE 有参
ajax('GTE',url,data)
//POST 无参
ajax('POST',url)
//POST 有参
ajax('POST',url,function(res){
var per=JSON.parse(res)
document.querySelector('#box').innerHTML=`用户名:${per.name},密码:${per.pwd}`
},data)
</script>
</body>
function ajax(method,url,fn,parms){
var xhr=new XMLHttpRequest()
method=method.toUpperCase();
if(method=="GTE"&&parms!=undefined){
url=url+'?'+parms
}
xhr.open(method,url,true)
if(method=="POST"&&parms!=undefined){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(parms)
}else{
xhr.send(null)
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
fn(xhr.responseText)
}
}
}