AJAX初步学习

原创 2015年07月07日 19:14:32

AJAX(Asynchronous Javascript and Xml)异步javascript和Xml

 一、Asynchronous异步的意思是,浏览器向服务器发送一个请求,不是傻傻等服务器返回请求后再执行别的操作,而是去做别的操作,当服务器返回请求回来时自动调用一个js函数,由这个函数执行一系列操作。因此,异步的好处是,提高了工作效率。

此外,AJAX还有一个作用。B/S以往都是由浏览器向服务器发送一个请求,当返回来一个页面就会在浏览器上刷新一下。而有些时候,在一个页面中进行操作的时候需要向服务器发送请求,但是,返回请求时不想让页面有这样的刷新效果。比如,在用户注册页面输入用户名时,需要与服务器交互,查询输入的用户名是否已被注册。利用AJAX就能解决这个问题。

二、AJAX的典型流程:

1、客户端触发异步操作       

<input id="username" type="text" name="username" size="30" maxlength="10" onblur="validate()"/>
   onblur会触发js函数validate();

2、创建新的XMLHttpRequest对象(XMLHttpRequest是浏览器中的一个内置对象)

   

var req;
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
  这段代码的意思就是把浏览器中的XMLHttpRequest对象new出来,但IE浏览器中的内置对象是ActiveXObject,其实这两个对象的的作用是一样的。

3、与Servlet进行连接

  

		var username = document.getElementById("username").value;
		var url = "validate.jsp?username=" + escape(username);
		req.open("GET", url, true);
       浏览器页面通过XMLHttpRequest对象req调用open方法 ,用get方式访问url,true表示采用异步方式。

      open表示打开连接。

4、服务器端进行连接处理

         

		req.onreadystatechange = callback;
          这行代码意思是,当req的状态改变时,就调用一次callback函数。

         解释一下服务器返回结果的状态:浏览器内置对象readyState有四个取值1,2,3,4分别表示XMLHttpRequest对象req的四种状态

             0----uninitialize表示req还没有初始化

             1----loadingd表示浏览器已经跟服务器建立好连接

             2----loaded表示浏览器的请求已经发送到了服务器,并且服务器返回给浏览器Http头信息,但内容还没返回来

             3----interactive表示浏览器正在取得服务器返回内容中...

             4----completed表示浏览器已经接收到服务器返回的整个Http请求

       

		req.send(null);
         把url请求发送到服务器。

         send表示发送数据。

5、返回包含处理结果的XML文档

	function callback() {
		if(req.readyState == 4) {
			if(req.status == 200) {
				var msg = req.responseXML.getElementsByTagName("msg")[0];
				//alert(msg.childNodes[0].nodeValue);
				//alert(req.responseText);
				setMsg(msg.childNodes[0].nodeValue);
			}	
		}
	}

		var msg = req.responseXML.getElementsByTagName("msg")[0];
          用req接收返回结果,并把返回结果当作XML文件来解析,然后把标签<msg></msg>中的元素全部取出来放入一个数组中。下表为0的元素赋值给 var msg。

6、XMLHttpRequest对象接收处理结果并分析

function setMsg(msg) {
		//alert(msg);
		if(msg == "invalid") {
			document.getElementById("usermsg").innerHTML = "<font color='red'>用户名已被注册</font>";
		} else {
			document.getElementById("usermsg").innerHTML = "<font color='blue'>用户名可用</font>";
		}
		
	}

7、更新页面

三、典型示例:

register.jsp

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK" import="com.bjsxt.shopping.* , java.sql.*" %> <!-- 说明本页的编码方式GBK -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> <!-- 当本文件被其他程序调用时,向其他程序声明本文件的文件类型和编码方式 -->
<title>用户注册</title>
<script type="text/javascript">
	var req;
	function validate() {
		var username = document.getElementById("username").value;
		var url = "validate.jsp?username=" + escape(username);
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET", url, true);
		req.onreadystatechange = callback;
		req.send(null);
	}
	
	
	function callback() {
		if(req.readyState == 4) {
			if(req.status == 200) {
				var msg = req.responseXML.getElementsByTagName("msg")[0];
				//alert(msg.childNodes[0].nodeValue);
				//alert(req.responseText);
				setMsg(msg.childNodes[0].nodeValue);
			}	
		}
	}
	
	function setMsg(msg) {
		//alert(msg);
		if(msg == "invalid") {
			document.getElementById("usermsg").innerHTML = "<font color='red'>用户名已被注册</font>";
		} else {
			document.getElementById("usermsg").innerHTML = "<font color='blue'>用户名可用</font>";
		}
		
	}
</script>
</head>
<body>
 <form action="register.jsp" method="post" name="form" onsubmit="return checkData()">
  <input type="hidden" name="action" value="register" />
  <table align="center" border="2">
   <tr>
     <td colspan="2" align="center">用户注册</td>    
   </tr>
   <tr>
     <td>用户名:</td>
     <td>
         <input id="username" type="text" name="username" size="30" maxlength="10" onblur="validate()"/>
         <div id="usermsg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
     </td>
   </tr>
   <tr>
     <td>密码:</td>
     <td><input type="password" name="password" size="15" maxlength="12" />
     </td>
   </tr>
   <tr>
     <td>密码确认:</td>
     <td><input type="password" name="password2" size="15" maxlength="12" />
     </td>
   </tr>
   <tr>
     <td>电话:</td>
     <td><input type="text" name="phone" size="20" maxlength="20" />
     </td>
   </tr>
   
   <tr>
     <td>地址:</td>
     <td><textarea name="addr" cols="50" rows="12"></textarea></td>
   </tr>
   
   <tr>
     <td><input type="submit" value="提交" />
         <input type="reset" value="重置"  />
     </td>
   </tr>
  </table>
 </form>
</body>
</html>
validate.jsp

<%
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store");  //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevent caching at the proxy server
response.getWriter().write("<msg>invalid</msg>");
%>


软件工程学习~初步总结

      其实学完软件工程已有几天了,一直没写总结,一来是软件工程中的一些作业还没有做完,二来是对软件工程的理解还不是很透彻。到目前为止,仍然对某些地方不太清楚。      学习其实是一个由表及里的...
  • the_fire
  • the_fire
  • 2009年08月24日 09:26
  • 1317

初步了解Ajax

以下参考部分菜鸟驿站以及W3school Ajax是一种让网页的响应更快的技术,因为它允许异步地向服务器发送请求,而不需要重新载入页面,使用Ajax来提升用户体验。 Ajax=Asynchronous...
  • sinat_36841379
  • sinat_36841379
  • 2017年03月10日 22:02
  • 117

github初步学习

不知不觉中发现代码的数量多了起来,在电脑上存放太过于臃肿,并且还不能换时空工作,学习点github使用方法 Git 使用 在文件夹 helloworld 下 git init//建立git可以记录的...
  • bolvtin
  • bolvtin
  • 2016年02月23日 12:04
  • 430

treap学习小结(一)

treap学习小结,清晰易懂~
  • Regina8023
  • Regina8023
  • 2014年11月29日 18:13
  • 776

Oracle的初学者入门心得

Oracle的初学者入门心得 Oracle的体系太庞大了,对于初学者来说,难免会有些无从下手的感觉,什么都想学,结果什么都学不好,所以把学习经验共享一下,希望让刚刚入门的人对Oracle有一个总体的认...
  • Drate
  • Drate
  • 2007年04月06日 10:58
  • 7107

libuv初步学习

一. 简介 Libevent、libev、libuv三个网络库,都是c语言实现的异步事件库Asynchronous event library)。 事件(Event):事件是异步事件通知机制的核心...
  • okiwilldoit
  • okiwilldoit
  • 2018年01月09日 17:04
  • 134

Ajax初步学习

创建对象var xmlHttp; function createXMLHttpRequest(){ if (window.XMLHttpRequest){ // code fo...
  • qq_26778805
  • qq_26778805
  • 2016年03月23日 20:44
  • 127

Ajax 初步学习总结

Ajax是什么 Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用,不是...
  • lishehe
  • lishehe
  • 2013年09月15日 20:50
  • 2290

AJAX 初步学习(2)

转自:http://www.runoob.com/ajax/ajax-xmlhttprequest-create.html —————————————————————————————————————...
  • shuilengqingqiu
  • shuilengqingqiu
  • 2017年03月07日 11:04
  • 50

Ajax深入学习笔记

最近在学习ajax,下面整理了一下学习的内容,以便巩固用。 先来看看为什么要用ajax,也就是同步和异步是什么:同步和异步同步的意思就是客户端提交表单,发起请求后需要一直等待服务器端的响应,收到服务...
  • VivianHope
  • VivianHope
  • 2015年06月03日 15:54
  • 1814
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX初步学习
举报原因:
原因补充:

(最多只允许输入30个字)