#原生ajax
- ajax含义:异步的javascript和xml
- 同步:假设甲正在A地方WC,此时乙也要在A地方WC,必须要等甲出来,乙才能进去WC
- 异步:假设甲正在A地方WC,此时乙也要在A地方WC,乙不用等甲出来就可以进入WC可以同时进行
- ajax作用:不用向服务器提交整个页面所有数据请求,而是可以向服务器请求一部分数据。比如注册账号时,填完用户名,鼠标离开会发现提示用户名被提示已经被注册,这是因为使用了ajax异步请求将用户名数据提交到服务器跟数据库进行对比发现重复,服务器响应给客户端已经被注册。
简单应用:
//创建ajax对象
var xhr= new XMLHttpRequest();
//监听状态码的变化 如果状态码等于4说明客户端已经都从服务器接收到全部数据
xhr.onreadystatechange=function(){
if(readyState == 4){
//返回的数据
xhr.responseText
}
}
//建立连接 有三个参数
xhr.open(请求方式,请求地址get请求加上参数 post不能加,默认true异步 false同步)
//发送请求 post请求方式的参数放这里 get请求放空
xhr.send()
#ajax请求封装
(function(){
var ajax={
getxhr:function()
{
return new XMLHttpRequest();
},
get:function(url,fn,sync=true)
{
var xhr = this.getxhr();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
fn(xhr.responseText);
}
}
xhr.open('get',url,sync);
xhr.send();
},
post:function(url,params,fn,sync=true)
{
var xhr = this.getxhr();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
fn(xhr.responseText);
}
}
xhr.open('post',url,sync);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params)
}
}
window.myajax=ajax
})()