目录
2、它的功能:在页面不跳转的情况下,向后端获取数据,在页面上表现出来
一、Ajax介绍
引言:
全局刷新(点击浏览器左上角那个顺时针的小转圈或重新进入网站):需要传输大量数据,浏览器重新加载,渲染页面;
局部刷新:在浏览器内部发起请求,获取数据,改变少量内容,其余部分不用再次加载和渲染,数据传输量少,用户体验更好,而Ajax就是属于局部变量,而其核心为异步对象(XMLHttpRequest)
1、它就是一个方法,不是语言
全称是Asynchronous JavaScript and XML(异步的JavaScript和XML)
主要技术有:JavaScript和css和xml和dom等,核心为js和xml;
js负责创建异步对象,发送请求,更新页面的dom对象。ajax请求需要服务器端的数据
2、它的功能:在页面不跳转的情况下,向后端获取数据,在页面上表现出来
例如:
1)输入过程中所弹出的提示
2)这种导航栏中显示的基础信息
3)以及一些网站里,你下拉到最后,又会加载一些东西出来,也用到了ajax
总之,就是你点击进入这个网站后需要从后端申请的信息,之后你点击或移动到哪儿,他就会自动显示的地方,就用到了ajax。
二、一些技术的介绍
1.xml:网络中的传输的数据格式(和html类似)。
<数据>
<数据1>宝马1</数据1>
<数据2>宝马2</数据2>
<数据3>宝马3</数据3>
<数据>
因为麻烦啰嗦,最后被json替换掉了
优点:无需刷新页面即可与服务器端进行通信,允许根据用户时间来更新部分页面
缺点:没有浏览历史,不能回退(因为并未更新页面),存在跨域问题,SEO不友好(搜索引擎优化不利,爬虫爬不到动态页面)
2、css、js为基础不做介绍
三、ajax的核心就是下面四个步骤完成的
1)创建异步对象
var xmlHttp = new XMLHttpRequest();
2)给异步对象绑定事件。
onreadystatechange 这个事件是当异步对象发起请求时,获取了数据都会触发它,这个事件需要绑定一个函数,在函数中处理状态的变化。
异步对象的属性 readyState 表示异步对象请求的状态变化,从0-4发生变化
0:请求未初始化,创建异步请求对象 var xmlHttp = new XMLHttpRequest();
1:初始化异步请求对象,xmlHttp.open(请求方式,请求地址,true)
2:异步对象发送请求,xmlHttp.send()
3:异步对象接受应答数据 从服务端返回数据。XMLHttpRequest 内部处理,此时3,注意3是异步对象内部使用,获取了原始的数据
4:异步请求对象已经将数据解析完毕。此时才可以读取数据。在4的时候,开发人员做什么呢?更新当前页面。
异步对象的status属性,表示网咯请求的状态,200,404,500,需要是当status==200时,表示网咯请求成功
3)初始化异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post,"服务器端的访问地址",同步|异步请求(默认式true,|异步请求))
例如:
xmlHttp.open("get","loginServlet?name=zs&pwd=123",true)
4)使用异步对象发送请求
xmlHttp.send()
获取服务器端放回的数据,使用异步对象的属性responseText.
使用例子:xmlHttp.responseText
注意: 回调:当请求的状态变化时,异步对象会自动调用onreadystatechange事件对应的函数
例如:
xmlhttp.onreadystatechange=function(){
处理请求的状态变化
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//可以处理服务器端的数据,更新当前页面
var data=xmlHttp.responseText;
document.getElementById("name").value=data;
}
}