Ajax
1、概念:
全称:Asynchronous Javascript And XML ---异步的 js和xml(标记语言)
AJAX是使用js向服务器发送请求的技术;是浏览器端不用刷新整个页面就可以与服务器端通信的技术;
包括:HTML,CSS用于呈现; DOM实现动态显示和交互; Javascript绑定和处理所有数据; XML和JSON进行数据交换与处理;
XMLHttpRequest(AJAX的核心对象)对象用于进行异步请求数据读取 --- AJAX的所有操作都是通过该对象来完成的
2、XML(可扩展的标记语言,语法和HTML一致)
XML是自定义标签,且语法比html严格; 而HTML的标签都是预定义的;如 h1 p div span ....
在AJAX中默认情况是以XML作为响应数据的格式来接收数据的
大多使用是JSON的格式
同步请求、异步请求
1. 传统web请求---同步请求
传统的发送请求的方式都是同步请求:直接在地址栏输入地址---点击超链接---提交表单…同步请求在发送时,在响应返回前我们无法对网页做任何的操作
- 同步请求在响应返回前用户需要一直等待,不能做的任何操作
- 同步请求一旦刷新就需要刷新整个页面,这样体验也不太好
2. AJAX请求---异步请求
异步请求在发送时,不会阻塞页面的其他部分,也就是说请求是通过浏览器的后台发送,不会对当前页面产生影响。
并且当响应返回时,不需要刷新整个页面只需要刷新网页的局部
优点:
1.Ajax采用异步的交互方式
2. 彻底将页面与数据分离。
3. 基于标准化的对象,不需要安装特定的插件, 浏览器都能支持Ajax
3. 无需刷新整个页面, 减少用户等待时间, 提高用户体验。
4. 减轻服务器的负担,AJAX一般只从服务器获取只需要的数据。
缺点:
1. 没有浏览历史, 无法通过回退按钮进行回退 2. 存在跨域请求问题
3. 对搜索引擎支持比较弱---页面与数据分离
如何设置请求的同步或异步?
request.open(method, url, true/false)
第3个参数 默认是true---异步 false---同步
同步请求与异步请求的区别?
1). 执行: request.send()
2). 异步: 此方法【立即返回】,后面立即获取请求的结果数据得不到, 只能在监听回调中获取(当结果数据返回后回调)
3). 同步: 此方法不会立即返回, 只有在服务器返回结果才返回。
不需要设置监听回调(在后面可以直接获取返回的结果数据)
3、使用步骤:
[一].创建XMLHttpRequest对象
eg: var xhr = new XMLHttpRequest();
var xhr = new ActiveXObject(); ---IE低版本
[二].设置请求的信息.open(method, url,async,user,password)
method ---get、post;
注:发送get请求时,有些浏览器会使用缓存,也就是只在第一次访问时发送,再次访问就不发了,而是从缓存中加载数据,浏览器的缓存是根据请求地址来保存的,只有地址改变就不会使用缓存了,可以在地址后面写随机数
url ---请求的地址,可以附加查询字符串
async---布尔值,是否发送异步请求,默认true,一般不传
<Ctrl+点击open 查看其源码>
* post请求才可以指定发送数据: name1=value1&name2=value2
* 如果是post请求,需要通过请求体发送请求参数的,还需要设置如下一个请求头:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
[三].发送请求 xhr.send("请求体");
[四].接收响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText) ---获取文本格式的响应
console.log(xhr.responseXML) ---获取XML格式的响应
}
};
xhr.readyState ==数字 ---查看当前请求的状态
0:请求未初始化(xhr对象刚建立);1:服务器连接已建立
2:请求已接收; 3:请求处理中 4:请求已完成,且响应已就绪
xhr.onreadystatechange用来监听readyState的改变,会在readyState发送变化时触发
xhr.status == 数字
200: "OK"; 304:请求重定向,重定向到缓存;
404:请求路径未找到 500:服务器错误(前端人员的福音)
u jQuery中的AJAX $.ajax() $.get() $.post() $.getJson()
eg : $.ajax({
type:get/post ; url: ‘/地址 ’; data:’请求参数’;
success:function(msg){ 请求成功以后调用 --msg 形参 实参是成功以后的数据
alert(msg)
}
})
$.get("/tool6" ,function (data) {})
$.post("/tool6",{username : "baobao"},function (data) {})