Ajax

Ajax

一、概述

1. Ajax概念

AJAX即Asynchronous Javascript And XML(异步JavaScript和XML),是改善用户体验的网页开发技术;

2. 传统交互方式与ajax交互方式

1. 传统交互方式:

客户端(浏览器)向服务器发送请求,服务器接收请求并处理完毕后会重新加载一个完整的网页(而且这个网页与之前的网页几乎差不多),并且将响应数据返回给客户端(浏览器),浏览器解析网页显示给用户;

在这里插入图片描述

缺点:

  1. 发送的请求是一个同步请求,销毁页面就不能继续操作;

  2. 修改的数据仅仅是页面中一小部分,然后响应的却是整个完整页面,浪费网络传输资源;

2. Ajax交互方式:

[外链图片转存失败(img-TQERPT33-1568043926536)(D:\Java\java file\java笔记\JavaMarkdown笔记\img\Ajax交互方式.png)]

优点:

  1. 异步请求,发送请求的同事还可以继续操作页面。页面不销毁;

  2. 返回部分数据,减少不必要的数据承传输,介绍网络资源。页面不刷新,而是更新页面部分数据;

总结:Ajax出现的缘由:更好的提升用户的体验,以及提升服务器的效率,减少网络中不必要的数据的传送;

3. Ajax使用场景

  1. 自动提示:百度输入框自动提示功能;

  2. 用户名重复检查:用户注册时,检查用户名是否存在,及时给用户反馈;

  3. 邮箱提示:WEB版邮箱系统,当有新邮件到底服务器,浏览器不用刷新页面也知道是否有新邮件;

  4. 无刷新分页:显示数据列表,用户点击下一页数据,整个页面不会刷新,只把下一页的数据更新到页面中;

  5. 购物车:用户点击添加到购物车后,能继续进行其他操作,而购物车的数据存储服务器端;

  6. 用户登录:用户登录的数据通过AJAX传输到后台,如果登录失败直接在当前登录页面提示用户,而不用刷新整个页面;

  7. 视频网站,商城网站;

  8. 股票网站;

小技巧:浏览器网站的时候,留心观察很多页面未刷新,但是页面中的内容被更改了,这些都是AJAX使用场景; 99%的网站都会用到Ajax;

4.Ajax实质

  1. 写Ajax代码就是写js代码;

  2. 学习Ajax其实是学习使用浏览器的Ajax(XMLHttpRequest对象)对象发异步请求,将响应的数据局部更新到页面;

5.同步和异步

  1. 同步:你先做完我再做,后一步的操作必须要等待前一步操作的结果

  2. 异步:各做各的相互不干扰(效率高)

二、如何获取Ajax对象

  1. AJAX对象本身是浏览器中的一个对象,但在低版本IE中表现为一个ActiveX。所以在使用JavaScript语言进行创建该对象时,Ajax没有标准化,需要区分不同的浏览器;

  2. 有时候我们会把XMLHttpRequest对象称为AJAX对象,或异步对象

创建方式1:判断方式

function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){//针对其他浏览器
		xhr = new XMLHttpRequest();
    }else{//针对低版本的ie浏览器
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	return xhr;
}

创建方式2:try…catch…方式

var ajax;
try {
	//如果是其它浏览器,这句代码可以成功,ajax对象就拿到了
	ajax  = new XMLHttpRequest(); 
} catch (e) {
	//如果是IE,上面肯定会报错,被抓取,就执行下面这句代码(IE支持)
	ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
}

三、Ajax的Api

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/open

[外链图片转存失败(img-gKslVFIC-1568043926537)(D:\Java\java file\java笔记\JavaMarkdown笔记\img\Ajax_api.png)]

1. onreadystatechange事件

​ onreadystatechange需要绑定一个事件处理函数,该函数用来处理readystatechange事件。当AJAX对象的 readyState的值发生了改变时,该事件由系统触发。比如,从0变成了1,就会产生readystatechange事件。在当前不同的处理状态下,可以进行状态的捕获,做些相应处理。每一次的状态变化都会触发onreadystatechange绑定的处理函数,只是大部分时候我们只需要知道从 3变为4,即当前readyState为4时这个状态,此时数据响应已返回,并接收成功,等待下一步的处理。格式如下:

只要 readyState 属性发生变化,就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequestreadyState 属性发生改变时触发 readystatechange 事件的时候被调用。

警告:这个方法不该用于同步的requests对象,并且不能在内部(C++)代码中使用.

当一个 XMLHttpRequest 请求被 abort() 方法取消时,其对应的 readystatechange 事件不会被触发。

UPDATE: 在下面的浏览器版本中会触发 (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11).

语法
XMLHttpRequest.onreadystatechange = callback;
取值
  • readyState 的值改变的时候,*callback* 函数会被调用。
示例
var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
	if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
		console.log(xhr.responseText)
	}
}
xhr.send();

2. readyState请求状态

  1. readyState代表请求的状态,使用不同的数字代表一个状态:

    0:还没有调用send()方法

    1:已经调用send(),正在发送请求

    2:send()调用完成,已接收全部响应内容

    3:正在解析响应内容

    4:响应内容解析完毕,可以在客户端获取并使用了

  2. 对于状态的判断书写代码的格式如下:

xhr.onreadystatechange=function(){
	if(xhr.readyState == 4){//已经接收到服务器响应的内容了
		var txt = xhr.responseText;//展示数据到页面
	}//这里最后不要写else,因为状态从0-1-2-3都会触发else
};
  1. 但是状态并不能保证回来的数据就是我们想要的数据,也可能是发回的错误提示。所以要想保证接受到的数据就是成功响应的数据,还需添加对另一个属性的判断(status)。这个属性代码响应的状态码,200代表成功,404代表没有找到资源,500代表服务器发生了运行异常;

  2. 服务器数据接收成功并且成功响应:

if(xhr.readyState == 4 && xhr.status == 200){
	//接收服务端响应回来的数据(responseText只接收text文本)
	var txt = xhr.responseText;
	document.getElementById("uname").innerHTML = txt;
}else{
	//发生了错误
	document.getElementById("s").innerHTML ='验证用户名出错';
}

四、Ajax的编写步骤

1. 举个栗子:邮寄一个包裹

  1. 找到一个快递公司(获取ajax对象);

  2. 准备好包裹;

  3. 设置一个状态监听事件(发货单),查看或监听包裹发送的状态(未发送,已发送,在路上,已接收等状态);

  4. 发送包裹;

2. Ajax发送请求实现步骤

  1. 获取ajax对象(已经获取);

  2. 准备发送请求:xhr.open(“get”,"/xx/add")

  3. 设置回调函数(主要是获取服务器返回的正确数据):

xhr.onreadystatechange = function(){

  ......

}
  1. 发送请求:xhr.send()

3. 使用ajax对象发送get请求

  1. 获取ajax对象(已经获取) – 外部js文件中,当然也可以自己重新获取一次

  2. 准备发送请求:xhr.open(“get”,“uri?name=value”,true)

  3. 设置回调函数:

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
	var text = xhr.responseText;
	alert(txet);
	}
}
  1. 发送请求:xhr.send(null)

代码实现:获取后台的数据更新到div中

测试:

  1. 测试获取readyState状态/有的浏览器0这个状态出不来;

  2. 测试不写后台代码,获取404页面的状态;

  3. 测试页面不刷新,局部更新;

  4. 测试正确状态;

4. 使用ajax对象发送post请求(多一步)

  1. 获取ajax对象(已经获取) – 外部js文件中,当然也可以自己重新获取一次

  2. 准备发送请求:xhr.open(“post”,“url”,true)

    (1) url:参数可以写在url后,后台也可以获取到,但是一般post的请求参数不会直接写在地址栏中;

  3. 设置回调函数:

jsxhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
	var text = xhr.responseText;
	alert(txet);
	}
}
  1. 设置请求头:

​ xhr.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);

注意:该操作必须在open与send之间调用,原因:

​ (1)open是创建一个请求,或者理解为请求的基本准备,如果没有请求,何来设置请求头信息;

​ (2)send是发送一个请求,请求会把当前请求的头信息进行发送,发送后设置头信息无效;

​ (3)如果js中没有参数传递到后台,可以省略这一步;

  1. 发送请求:xhr.send(“key=value”);

注意:记步骤,记方法,记get请求与post请求的差异;

五、Ajax编码问题

1. 为什么会有乱码?

  1. 乱码的根本原因在于编码和解码的方式不同而产生的;

  2. IE浏览器提供的AJAX对象会使用GBK字符集对请求参数进行编码,而其它浏览器会使用UTF-8来编码。也就是不同的浏览器在发送请求时数据编码就已经不一致了;

  3. 对于服务器来讲,默认情况下会使用ISO-8859-1进行解码,这种解码格式是Tomcat的配置文件中声明的;

1.4.2. 解决GET请求时的乱码问题

  1. 前台:

    • 使用encodeURI对请求地址进行编码。encodeURI会使用utf-8对请求地址中的中文参数进行编码:xhr.open(“get”, encodeURI(uri) , true);
  2. 后台:指定字符集进行解码(tomcat8及其以上不需要,默认就是UTF-8)

    • Tomcat可以修改conf/server.xml文件中 ,使得tomcat按UTF-8方式解码;

3. POST请求时的乱码问题

  1. 因为所有浏览器在进行POST方式提交时都是使用UTF-8方式进行编码的,到了服务器端则默认使用ISO-8859-1方式来解码;

  2. 所以只需要修改服务器端的解码格式,保证是UTF-8的方式来解码就可以避免乱码:request.setCharacterEncoding(“UTF-8”);

六、Ajax Get提交IE缓存问题

  1. IE浏览器提供的AJAX对象,在发送GET请求时,会先查看是否访问过该地址,如果该地址已经访问过,那么浏览器不再发送请求;

  2. 表现在页面上是,第一次点击某功能会得到数据,但是如果多次反复点击想获取最新数据时页面不会有任何变化,因浏览器发现地址相同而拒绝发出请求;

  3. 但这种页面表现只出现在IE浏览器中,Chrome浏览器和Firefox浏览器都能够实现数据的获取和页面的刷新;

  4. 缓存问题演示:从后台获取随机数更新到页面

  5. 测试结果:ie浏览器存在缓存问题,其他浏览器正常

  6. 如何解决:

    (1) 发送post请求

    (2) 欺骗浏览器,请它以为我们正在发送不同的请求:

  • xhr.open(‘get’,‘random?r=’ + Math.random()); //通过随机数

地址已经访问过,那么浏览器不再发送请求;

  1. 表现在页面上是,第一次点击某功能会得到数据,但是如果多次反复点击想获取最新数据时页面不会有任何变化,因浏览器发现地址相同而拒绝发出请求;

  2. 但这种页面表现只出现在IE浏览器中,Chrome浏览器和Firefox浏览器都能够实现数据的获取和页面的刷新;

  3. 缓存问题演示:从后台获取随机数更新到页面

  4. 测试结果:ie浏览器存在缓存问题,其他浏览器正常

  5. 如何解决:

    (1) 发送post请求

    (2) 欺骗浏览器,请它以为我们正在发送不同的请求:

  • xhr.open(‘get’,‘random?r=’ + Math.random()); //通过随机数

  • xhr.open(‘get’,‘random?’ + (new Date()).getTime()); //通过时间戳

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值