Javascript Ajax总结

原创 2013年12月04日 00:33:47

通过Ajax技术,浏览器可以和服务器建立通道进行数据交换并且可以在不重新载入页面的情况下更新页面的局部内容。

建立Ajax通信的步骤:

1.创建一个XMLHttpRequest对象。

2.调用的XMLHttpRequest的open方法初始化对象,设置数据的发送方式(GET/POST),URL等。

3.使用send方法将请求发送到服务器。

4.请求发送到服务器后,根据请求对象的状态触发回调函数,获取响应。

下面依次实现以上各个步骤:

一.创建XMLHttpRequest对象。

主流浏览器(FireFox,Chrome,Opera,Safari)支持XMLHttpRequest对象,IE例外,从IE7才开始支持,但是之前支持的是ActiveX对象,因此创建的时候要确保兼容性。

function createRequestObject() {
  var ajaxRequest;
  try {
    ajaxRequest = new XMLHttpRequest();
  } catch(e) {
    //ie浏览器
    try {
      ajaxRequest = new ActiveXObject("Msxm12.XMLHTTP");
    } catch(e) {
      try {
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
         return false;
      }
    }
  }
  return ajaxRequest;
}

XMLHttpRequest的属性

status:请求响应的状态码

statusText:以字符串形式返回的Http状态码,比如OK和NOT FOUND

readyState:代表当前XMLHttpRequest对象状态的数字

0:已创建XMLHttpRequest对象,没有初始化

1:加载中,还没有调用send方法

2:已经加载,已经调用send方法

3:交互中,收到部分数据

4:交互完成,所有数据都已经接收并且可用

responseText:服务器返回的字符串

responseXML:服务器返回的xml对象

方法:

abort():取消请求

getAllResponseHeaders():得到http头信息

getResponseHeader(str):得到指定http头的值,比如Server或者Last-Modified

open():初始化XMLHttpRequest对象

setRequestHeader():增加消息头

事件处理函数:

onreadystatechange:当readyState改变时回调

onerror:请求过程中发生错误时回调

onprogress:内容加载后回调

onload:文档加载完成后回调

二.初始化XMLHttpRequest对象

调用open方法初始化,open的3个参数分别是:请求类型(POST/GET),url以及参数,是否异步请求

get示例:

 ajaxRequest.open("GET","http://localhost:8080/test?name=tim", true);
 ajaxRequest.send(null);

post示例:

 ajaxRequest.open("POST","http://localhost:8080/test", true);
 ajaxRequest.sendRequestHeader("Content-Type", "application/x-www-form-urlencoded")
 ajaxRequest.send("name=tim");
三.监听服务器响应

将处理函数赋值给回调函数onreadystatechange,它在请求结束时被回调。

 ajaxRequest.onreadystatechange=function() {
  .......
 }
四.获取服务器响应内容

 ajaxRequest.onreadystatechange=function() {
    if (ajaxRequest.readyState==4) {
      if (ajaxRequest.status==200) {
        var txtObj = ajaxRequest.responseText;
      }
    }
 }
下面示例演示一个完整的ajax请求过程

服务端Servlet:

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//返回表单中的输入
		String name = request.getParameter("name");
		String age = request.getParameter("age");
		response.getWriter().write("name="+name+";age="+age);
		response.getWriter().close();
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}

JSP:

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript">
function createRequestObject() {
	  var ajaxRequest;
	  try {
	    ajaxRequest = new XMLHttpRequest();
	  } catch(e) {
	    //ie浏览器
	    try {
	      ajaxRequest = new ActiveXObject("Msxm12.XMLHTTP");
	    } catch(e) {
	      try {
	         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
	      } catch (e) {
	         return false;
	      }
	    }
	  }
	  return ajaxRequest;
	}
	//get方式
	function goAjaxWithGet() {
		var ajaxRequest = createRequestObject();	
		if (ajaxRequest != false) {
			ajaxRequest.onreadystatechange = function() {
				if (ajaxRequest.readyState==4) {
					if (ajaxRequest.status==200) {
						alert(ajaxRequest.responseText);
					}
				} else if (ajaxRequest.status==404) {
					alert("找不到");
				}
			}
		}
		var name = encodeURIComponent(document.getElementById("name").value);
		var age = encodeURIComponent(document.getElementById("age").value);
		
		ajaxRequest.open("GET", "http://localhost:8080/FirstStruts/AjaxServlet?name="+name+"&age="+age, true);
		ajaxRequest.send(null);

	}
	//post方式
	function goAjaxWithPost() {
		var ajaxRequest = createRequestObject();	
		if (ajaxRequest != false) {
			ajaxRequest.onreadystatechange = function() {
				if (ajaxRequest.readyState==4) {
					if (ajaxRequest.status==200) {
						alert(ajaxRequest.responseText);
					}
				} else if (ajaxRequest.status==404) {
					alert("找不到");
				}
			}
		}
		var name = encodeURIComponent(document.getElementById("name").value);
		var age = encodeURIComponent(document.getElementById("age").value);
		ajaxRequest.open("POST", "http://localhost:8080/FirstStruts/AjaxServlet", true);
		ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajaxRequest.send("name="+name+"&age="+age);
	
	}
   
</script>

</head>
<body>
   <form action="">
   	    name:<input type="text" id="name" value="oHeHeHou" /><br/>
   	    age:<input type="text" id="age" value="12" /><br/>
   	    <input type="submit" value="get" onClick="goAjaxWithGet()"; />
   	    <input type="submit" value="post" onClick="goAjaxWithPost()"; />
   </form>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

【JavaScript】AJAX总结(异步JavaScript和XML)

AJAX介绍 通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。 AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象。 AJAX 应用程...
  • oYunTaoLianWu
  • oYunTaoLianWu
  • 2013年08月27日 00:52
  • 1574

史上最全的javascript知识点总结,浅显易懂。

一,认识javascript 1-1 为什么学习JavaScript 一)、你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript。 2. 目...
  • qiushi_1990
  • qiushi_1990
  • 2014年10月19日 10:03
  • 2884

javascript 学习小结 JS装逼技巧(一) by FungLeo

javascript 学习小结 JS装逼技巧(一) by FungLeo前言最近一直在做javascript方面的工作.但是本身我的javascript水平比较低,因此在学习过程中比较困难.而最近又接...
  • FungLeo
  • FungLeo
  • 2016年05月11日 21:47
  • 10250

【JavaScript】AJAX 使用总结

AJAX 技术在互联网开发中是非常常用的,它的异步传输使用户对互联网软件的体验有了很大的提升,不仅如此,它还可以减轻服务器的压力,把一部分负担工作转移到客户端。     对于 AJAX,最核心的一个...
  • dymyw
  • dymyw
  • 2012年07月31日 15:07
  • 357

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

一、AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术、改善用户体验,实现无刷新...
  • zhangguo5
  • zhangguo5
  • 2017年03月16日 15:06
  • 626

JavaScript学习总结(七)Ajax和Http状态字

Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。 AJAX是不能跨域的,如需跨域,可以使用document.domai...
  • Dorrn
  • Dorrn
  • 2015年01月04日 18:27
  • 190

JavaScript、JQuery与Ajax的宏观总结

基本总结: JavaScript是一种属于网络的脚本语言,已经被广泛用于应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中...
  • u013046597
  • u013046597
  • 2016年05月22日 23:27
  • 707

JavaScript学习总结(七)Ajax和Http状态字

Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。 AJAX是不能跨域的,如需跨域,可以使用document.domai...
  • cfang2005
  • cfang2005
  • 2015年01月05日 18:46
  • 234

【JavaScript】AJAX总结(异步JavaScript和XML)

AJAX介绍 通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。 AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象。 AJAX 应用程...
  • oYunTaoLianWu
  • oYunTaoLianWu
  • 2013年08月27日 00:52
  • 1574

【JavaScript.6】阶段概念总结之HTML+CSS+JavaScript+xml+xpath+Json+Ajax

【前言】     最近学习了很多BS的新东西,有很多新名称,概念多了,理解也少了,很多东西都混乱。今天静下来把学到的几 个概念性东西总结一下。本文多是一些概念性的个人理解,希望同样...
  • mengdonghui123456
  • mengdonghui123456
  • 2015年12月28日 17:38
  • 2104
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript Ajax总结
举报原因:
原因补充:

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