AJAX简介

一、什么事AJAX 

  • AJAX:Asynchoronous异步的 JS 和 XML
  • 客户端(特指ps浏览器)与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯
  • 即,AJAX是一个【局部刷新】的【异步】通讯技术

二、工作原理与特点 

 1、什么是同步?

  •  请求1->响应1->请求2->响应2->
  • Web1.0时代

2、什么是异步 :

  • 请求1->请求2->请求3->响应1->响应2->响应3->
  • 请求1->响应1->请求2->请求3->响应2->响应3->

    Web2.0时代

 项目中:Web1.0为主(整个浏览器刷新),Web2.0为辅(浏览器局部刷新)

同步与异步的区别:(区别于阻塞和非阻塞)

 调用:

  • 同步是指:当程序1调用程序2时,程序1停下不动,直到程序2完成回到程序1来,程序1才继续执行下去。  
  • 异步是指:当程序1调用程序2时,程序1径自继续自己的下一个动作,不受程序2的的影响。

发送请求:

  • 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。  
  • 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。 

 3、不用刷新真个页面可与服务器通讯的办法:

  •        (A)Flash/ActionScript
  •        (B)框架Frameset
  •        (C)iFrame(内嵌入框架)
  •        (D)XMLHttpRequest(非IE浏览器)和ActiveXObject(IE浏览器)

 背景:

  • 早在IE5时,微软就开发出了第一个异步通讯对象,叫ActiveXObject对象,
  • Firefox等其它浏览器厂商也慢慢引入异步通讯对象,叫XMLHttpRequest对象,
  • IE的高版本,也将这个异步对象取名叫XMLHttpRequest对象,但IE有向下兼容问题,
  • 也可以使用ActiveXObject对象。
  • 无需第三方jar包,现代中高版本浏览器中内置了这个异步通讯对象,只需通过JavaScript就可以创建
<--注意:所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来-->
function createAJAX(){
	var ajax = null;
	try{
		ajax = new ActiveXObject("microsoft.xmlhttp");
	}catch(e1){
		ajax = new XMLHttpRequest();
	}
	return ajax;

4、AJAX 工作原理

 5、AJAX开发步骤

  • 创建AJAX异步对象,例如:createAJAX()
  • 准备发送异步请求,例如:ajax.open(method,url)
  • 如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader()

 如果是GET请求的话,无需设置设置AJAX请求头

  • 真正发送请求体中的数据到服务器,例如:ajax.send()
  • AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数
  • 在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面

7、AJAX 适合用在什么地方

  • AJAX【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】
  • AJAX是一个和服务器无关的技术,即服务器可使用:JavaEE,.NET,PHP,。。。这些技术都可
  • AJAX只管向服务器发送请求,同时只管接收服务器的HTMLXMLJSON载体响应
  •  服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新即只能以流的方式响应给浏览器

三、AJAX应用 

①无需刷新整个Web页面显示服务器响应的当前时间

<!--
    (text/html;charset=UTF-8) 
	当前时间:<span></span><br/>
	<input type="button" value="异步方式提交"/>
-->
<script type="text/javascript">
		//定位button按钮,同时添加单击事件
		document.getElementsByTagName("input")[0].onclick = function(){
			//NO1)创建AJAX异步对象(每个浏览器内置的,无需第三方jar包)
			var ajax = createAJAX();//0
			//NO2)AJAX异步对象准备发送请求
			var url = "${pageContext.request.contextPath}/TimeServletAjax?id="+new Date().getTime();
			var method = "GET";
			ajax.open(method,url);//1
			//NO3)AJAX异步对象真正发送请求体的数据到服务器,如果请求体无数据的话,用null表示
			var content = null;
			ajax.send(content);//2
			
			//----------------------------------------等待
			
			//NO4)AJAX异步对象不断监听服务端状态的变化,只有状态码变化了,方可触发函数
			//0-1-2-3-4,这些是可以触发函数的
			//4-4-4-4-4,这些是不可以触发函数的
			//以下这个函数是服务器来触发的,不是程序员触发的,这和onclick是不一样的
			ajax.onreadystatechange = function(){
				//如果AJAX状态码为4
				if(ajax.readyState == 4){
					//如果服务器响应码是200
					if(ajax.status == 200){
						//NO5)从AJAX异步对象中获取服务器响应的结果
						var str = ajax.responseText;
						//NO6)按照DOM规则,将结果动态添加到web页面指向的标签中
						document.getElementsByTagName("span")[0].innerHTML = str;
					}
				}
			}
		} 
	</script>
public class TimeServletAjax extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String str = sdf.format(new Date());
		//注意:在Web2.0时代,即异步方式下,不能用转发或重定向
		//因为:转发或重定向会引起浏览器全部刷新,而不是局部刷新
		//所以得用以输出流的方式将服务器的结果输出到浏览器
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(str);
		pw.flush();
		pw.close();
	}
}

②基于HTML,以GET或POST方式,检查注册用户名是否在数据库中已存在

	输入用户名[POST]:<input type="text" maxlength="8"/>光标移出后,立刻显示结果
	<hr/>
	<div></div>
     
//设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
var content = "username=" + username;
ajax.send(content);
public class RegisterServletPost extends HttpServlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String username = request.getParameter("username");
		String tip = "images/MsgSent.gif";
		if("杰克".equals(username)){
			tip = "images/MsgError.gif";
		}
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}
}

四、XMLHttpRequest(即:AJAX)对象常用事件,方法和属性

1、事件:

        ajax.onreadystatechange:表示AJAX异步对象不断监听服务端的响应,

        是由服务器程序触发,不是程序员触发

2、属性:

  • ajax.readyState==0:表示AJAX异步对象已创建好,但还没有调用open()方法
  • ajax.readyState==1:表示AJAX异步对象已调用open()方法,但还没有调用send()方法
  • ajax.readyState==2:表示AJAX异步对象已调用send()方法,但请求还没有到达服务器端
  • ajax.readyState==3:表示服务端已接收到AJAX异步对象的请求,正在处理响应中。。。
  • ajax.readyState==【4】:表示AJAX异步对象已经完完全全接收到了服务器的响应信息,但接收到的数据不一定都正确

上述5种状态不是所有浏览器都相同,但状态4每种浏览器都相同

  • ajax.status==200:表示AJAX异步对象接收到响应码,如果是200的话,表示一切正常
  • ajax.responseText:表示从AJAX异步对象中获取HTML载体中的数据,以字符串的形式接收
  • ajax.responseXML:表示从AJAX异步对象中获取XML载体中的数据,以XML文件的形式接收

3、方法

 ①、ajax.open(method,url,可选的boolean值)

    AJAX异步对象准备发送异步请求

  •     参数一:以什么方式发送,常用的用GET或POST,大小写不敏感
  •     参数二:发送到什么地方去,常用Servlet或Struts2或SpringMVC来接收,这里只限于JavaEE学科
  •     参数三:默认值为true,表示AJAX对象以【异步】的方式提交到服务端

                  如果设置为false,表示AJAX对象以【同步】的方式提交到服务端

        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")

    表示将请求体中的内容,按照UTF-8的方式进行编码,只针对POST请求有效

② ajax.send(content)

    AJAX异步对象真正发送异步请求

    参数一:表示HTTP【请求体】中的内容

如果是GET方式:content = null,如果强行传值到服务器,服务端收不到,返回NULL

如果是POST方式:content != null,例如:username=jack&password=123&role=admin

五、数据载体

1、HTML

  • (A)优点:服务端响应的是普通html字符串,无需JS解析,配合innerHTML属性效率高
  • (B) 缺点:如果需要更新WEB页面中的很多处地方,HTML不太方便,同时innerHTML属性不是DOM的标准,不能操作XML
  •    注意:innerHTML在xml中不能使用,用firstChild.nodeValue替代
  • (C)适合:小量数据载体,且只更新在web页面中的一个地方

2、XML

  • (A)优点:是种通用的普通字符串格式,任何技术都能解析,标签名可以任意,使用DOM标准规则能够解析XML的任何部分
  • (B)缺点:XML文件格式相当严格,出错后,responseXML属性返回NULL,如果XML文件过长,导致解析效率低下
  • (C)适合:大量具有层次数据载体    

六、jquery常用的 AJAX—API

目的:简化客户端与服务器进行局部刷新的异步通讯

①取得服务端当前时间

  • 简单形式:jQuery对象.load(url)

          返回结果自动添加到jQuery对象代表的标签中间

          如果是Servlet的话,采用的是GET方式        

  • 注意:使用load方法时,自动进行编码,无需手工编码
<script type="text/javascript">
    $("#btn1").click(function(){
        var url = "http://localhost:8080/servlet-day01/ajaxTime";
        $("#time").load(url);

    });
</script>

②检查注册用户名和密码是否存在

$.get(url,sendData,function(backData,textStatus,ajax){... ...})
$.post(url,sendData,function(backData,textStatus,ajax){... ...})

注意:使用get或post方法时,自动进行编码,无需手工编码

方法参数解释:

  •     参数一:url发送到哪里去
  •     参数二: sendData发送请求体中的数据,符合JSON格式,例如:{key:value,key:value}
  •     参数三:function处理函数,类似于传统方式ajax.onreadystatechange = 处理函数

其中参数三为function处理函数最多可以接收三个参数,含义如下

  • 第一个参数:服务端返回的数据,例如:backData
  • 第二个参数:服务端状态码的文本描述,例如:success、error、
  • 第三个参数:ajax异步对象,即XMLHttpRequest对象

        以上所有参数的名字可以任意,但必须按顺序书写,尽量做到见名知意

在使用异步请求的时候,在function处理函数里添加第四个参数(“json”),可以将返回的数据直接写为对象

③jQuery对象.serialize()  序列化

<--使用jquery的API,不是原生态的-->
var sendData = $("form").serialize();

 作用:自动生成JSON格式的文本

  •     注意:为每个jQuery对象设置一个name属性,因为name属性会被认为请求参数名
  •     注意:必须用<form>标签元素
  •     适用:如果属性过多,强烈推荐采用这个API

/*手工书写JSON文本*/
			var sendData = {
				"user.username":username,
				"user.password":password
			};
			
			/*工具生成JSON文本*/
			var sendData = $("form").serialize();
			

七、流程总结

  • jsp页面点击按钮或链接,触发Ajax发送请求
  • ①创建AJAX对象
  • ②打开AJAX对象,设置 method 和 url
  • ③定义参数,发送AJAX对象
  • ④后台根据地址获取数据,并通过流返回数据(数据存储在ajax对象中)
  • ⑤响应返回,处理相应结果(获取数据,dom操作,修改页面内容)
 //页面dom模型完成时执行
      $(function () {}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值