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 使用总结

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

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

AJAX介绍 通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序。 AJAX 基于 JavaScript 和 JavaScript的XMLHttpRequest对象。 AJAX 应用程...

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

【前言】     最近学习了很多BS的新东西,有很多新名称,概念多了,理解也少了,很多东西都混乱。今天静下来把学到的几 个概念性东西总结一下。本文多是一些概念性的个人理解,希望同样...

Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望为更好的运...

javascript+.net ajax用法

Javascript跨域和Ajax跨域解决方案

最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题,但是放到二级域和其他域下浏览器直接就弹出提示框:“该页正在访问其控制范围之外的数据,这有些危险,是否继续" 1.什么引...
  • e_wsq
  • e_wsq
  • 2011-11-15 19:52
  • 255
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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