Ajax的介绍
Ajax是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
比如,百度搜索是当输入一个字符之后 会实时显示出相关信息。以前Ajax使用xml格式的字符串进行数据交换,现在已经被JSON取代了。
XML可扩展标记语言,XML被设计用来传输和存储数据。XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据
存储数据的类型
XML
Xml又叫可扩展标记语言,主要用来传输和存储数据,
xml和html类似,都是使用标签,不同的是html中都是预定义标签 标签嵌套标签
麻烦 已不常用
//获取xml数据 xhr.responseXML.getElementsByTagName("xml标签名")
json
使用数组存放多个对象,每个对象就是某条数据
需要将接送转换为js对象,JSON.parse(xhr.responseText)实现反序列化
同步和异步
同步:同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进度将会一直等待下去,知道收到返回信息才继续执行下去,相当于就是客户端发送请求给服务端,在等待服务端响应请求时,客户端不做其他的事情。当服务器做完了才会返回到客户端,这样的话客户端需要一直等待,用户使用起来不友好,
异步:是指进程不需要一直等待下去,而是继续执行下面的操作,不管其他进程的状态,当有其消息返回时系统会通知进程进行处理,这样可以提高执行的效率。相当于客户端发给服务器请求时,在等待服务端相应的时候,客户端可以做其他的事情,这样节约了时间,提高了效率,
同步是阻塞模式,异步是非阻塞模式
同步好比是排队做核酸,需要一个做完才能给下一个做。而异步好比是你可以一边打游戏一边看电视,多个进程同时请求
Ajax特点
优点:
可以无需刷新页面,与服务器进行通信。
允许依据用户时间来更新部分页面内容
缺点:
没有浏览记录,不能回退
存在跨域问题(同源)
SEO不友好(搜索引擎优化,对爬虫不友好)
Ajax原理
客户端发送请求,请求交给XMLHttpRequest,XMLHttpRequest把请求提交给服务器,服务器进行业务处理,服务器响应数据交给XMLHttpRequest对象,XMLHttpRequest对象接收数据,由JavaScript把数据写到页面上
原生js Ajax
步骤
//第一步:创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//第二步:告诉浏览器请求方式、地址、同步(false)或异步(true)
xhr.open("请求方式","接口地址","同步或异步");
//第三步:设置响应服务器端数据处理
//第一种、可执行多次 data 返回的数据
xhr.onreadystatechange = function(){
//需要判断状态值是否到4
if(xhr.status == 200 && xhr.readyState == 4){
//请求成功所执行代码块
}
}
//第二种、只执行一次
xhr.onload = function(){
//不需要判断状态值
}
//第四步:发送请求 传输参数也在其中写
xhr.send()
五个状态:
状态值0:未初始化状态
状态值1:初始化状态
状态值2:发送数据状态
状态值3:接受数据状态
状态值4:完成状态
常用方法
方法 | 描述 |
---|---|
open(method,url,async) | 请求的类型,url以及是否异步请求, method:请求的类型 GET或POST url:文件在服务器上的位置 async:true(异步)或false(同步) |
onreadystatechange | 存储函数或函数名,每当readyState属性改变时,就会调用该函数。 |
readyState | 存有XMLHttpRequest的状态 从0到4发生变化 0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成,且相应已就绪 |
status | 200:"ok" 404:未找到页面 |
jQuery封装的Ajax
$.ajax()
//格式:
$.ajax({
async:true, //是否异步处理 默认true
type:'get', //请求方式 get或post
url:'接口地址', //接口地址
dataType:'json',//数据类型
success:function(res){} //请 求成功回调函数 res存储数据
data:{} //传参
error:function(err){} //err请求失败返回
})
$.get({})和$.post({})
//get请求数据
$.get(地址,{data参数},回调函数,[dataType数据类型])
//post请求数据
$.post(地址,{data参数},回调函数,[dataType数据类型])
//data为返回的数据
$.get('/data/student.json', function (data) {})