一,Ajax
1.1什么是Ajax呢?
Ajax(Asynchronous Javascript And XML) (异步 JavaScript 和 XML）
它是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。
那么上面所说什么是异步呢
好比如说:你在注册一个账号,你需要添加用户名,性别,地址,密码,手机号,密保问题,身份证号.....等等等,然后你提交的时候,突然发现你的用户名格式错误,然后所有东西都没了,你还得重新去填。这就是同步
所谓异步:最大特点就是页面不刷新:如我们在看电影时候的弹幕,评价........
传统验证方式的缺点
1.耗费流量,因为将数据反复提交给浏览器
2.好费时间长:多次提交的耗时
3.用户体验差:仅仅因为写错了一个数据,导致页面重新加载,又得重新写ajax优点
1.节省流量
2.节省操作时间
3.不刷新页面
1.2核心技术,XMLHttpRequest 简称:XMR。
它有一个兼容问题,一说兼容问题,我们就想到了IE浏览器
方法if,属性用||
var xhr ;
if(window.XMLHttpRequest){
//主流浏览器写法
xhr = new XMLHttpRequest();
}else{
//兼容IE写法
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax请求数据的固定格式
1.创建XMLHttpRequest对象xhr
2.创建请求(写请求方式和数据)open()
3.发送请求send()
4.监听onreadystatechange
下面写一个返回json数据
//1.创建XMLHttpRequest对象`xhr`
var xhr ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.创建请求(写请求方式和数据)`open()`
xhr.open("get","index.json");
//3.发送请求`send()`
xhr.send();
//4.监听`onreadystatechange`
xhr.onreadystatechange = function(){
//监听判断状态值是不是4
if(xhr.readyState == 4){
//再判断xhr的状态码是不是200
if(xhr.status == 200){
// console.log(xhr.responseText);
//这是字符串 需要反序列化转换为Object
var txt = JSON.parse( xhr.responseText)
console.log(txt);
}
}
}
解析一下监听状态是什么 ajax的readyState的属性
他一共有5个值 分别是 0 1 2 3 4
- 0:代表了ajax对象
- 1:已经调用了open方法,创建了http请求
- 2:已经调用了send方法,发送了请求
- 3:正在返回数据,但是不完整,已经有了一小部分
- 4:ajax请求完成,数据返回完整
所以我们需要状态是4然后在正常读取数据
那么什么是status呢?
可以简单的理解为state代表一个整体的状态。而status是这个大的state下面具体的小的状态。
无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码 他也有5个状态
- 1 xx：信息响应类，表示接收到请求并且继续处理
- 2 xx：处理成功响应类，表示动作被成功接收、理解和接受
200 - 3 xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
- 4 xx：客户端错误，客户请求包含语法错误或者是不能正确执行
404 - 5 xx：服务端错误，服务器不能正确执行一个正确的请求
502
所以最好我们要写成
xhr.status === 200 && xhr.readyState === 4
Ajax和json的关系 是请求并响应json的数据
