您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记7-Ajax（编写模板）

2015-09-06 21:46 633 查看
Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML

Ajax中的一个重要对象是XMLHttpRequest。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'ajax.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript">
	
	var xmlHttpRequest = null; //声明一个空对象以接收XMLHttpRequest对象
	
	function ajaxSubmit()
	{
		if(window.ActiveXObject) // IE浏览器
		{
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		else if(window.XMLHttpRequest) //除IE外的其他浏览器实现
		{
			xmlHttpRequest = new XMLHttpRequest();
		}
		
		if(null != xmlHttpRequest)
		{
			var v1 = document.getElementById("value1ID").value;
			var v2 = document.getElementById("value2ID").value;
			
			xmlHttpRequest.open("POST", "AjaxServlet", true);
			
			//关联好ajax的回调函数
			xmlHttpRequest.onreadystatechange = ajaxCallback;
			
			//真正向服务器端发送数据，以get提交参数这里必须设置为null。因为post是在请求体里附加参数
			xmlHttpRequest.send(null);
			// 使用post方式提交，必须要加上如下一行
			xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);
		}
	}
	
	//处理响应
	function ajaxCallback()
	{
		if(xmlHttpRequest.readyState == 4)
		{
			if(xmlHttpRequest.status == 200)
			{
				var responseText = xmlHttpRequest.responseText;
				
				document.getElementById("div1").innerHTML = responseText;
			}
		}
	}
	
	</script>

  </head>
  
  <body>
    
    <input type="button" value="get content from server" onclick="ajaxSubmit();"><br>
    <input type="text" name="value1" id="value1ID"><br>
    <input type="text" name="value2" id="value2ID"><br>
    
    <div id="div1"></div>
    
  </body>
</html>


服务端代码：

package com.shengsiyuan.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet extends HttpServlet
{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		System.out.println("doGet invoked");

		process(req, resp);
	}

	private void process(HttpServletRequest req, HttpServletResponse resp)
			throws IOException
	{
		String v1 = req.getParameter("v1");
		String v2 = req.getParameter("v2");

		System.out.println("v1=" + v1 + ", v2=" + v2);
		
		String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));

		PrintWriter out = resp.getWriter();

		// try
		// {
		// Thread.sleep(5000);
		// }
		// catch (InterruptedException e)
		// {
		// e.printStackTrace();
		// }

		resp.setHeader("pragma", "no-cache");
		resp.setHeader("cache-control", "no-cache");

		out.println(v3);

		out.flush();
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException
	{
		System.out.println("doPost invoked");

		this.process(req, resp);
	}
}


XMLHttpRequest对象的readyState和status区别

可以简单的理解为state代表一个整体的状态。而status是这个大的state下***体的小的状态。

比如，水的state 1.可饮用 2.不可饮用 如果是可饮用 ， 那么对应的 PH值Status=x,矿物质Status. =xxx.....

比如XMLHttpRequest对象的readyState和status，readyState为4，会有对应的，才会有响应status:500,404...

readyState表示XMLHttpRequest对象的处理状态：

0:XMLHttpRequest对象还没有完成初始化。(准备司机、车、货物)

1:XMLHttpRequest对象开始发送请求。(需要送十车货物，当前正在送第几车)

2:XMLHttpRequest对象的请求发送完成。(十车货送完毕)

3:XMLHttpRequest对象开始读取服务器的响应。(准备把这十车加工的货拉回来，当前第几车)

4:XMLHttpRequest对象读取服务器响应结束。(十车货全部拉回完毕)

readyState表示XMLHttpRequest对象的处理状态：

0:XMLHttpRequest对象还没有完成初始化。(准备司机、车、货物)

1:XMLHttpRequest对象开始发送请求。(需要送十车货物，当前正在送第几车)

2:XMLHttpRequest对象的请求发送完成。(十车货送完毕)

3:XMLHttpRequest对象开始读取服务器的响应。(准备把这十车加工的货拉回来，当前第几车)

4:XMLHttpRequest对象读取服务器响应结束。(十车货全部拉回完毕)

status状态：

1xx:信息响应类，表示接收到请求并且继续处理。(所有拉去的货，工厂还没有加工完毕)

2xx:处理成功响应类，表示动作被成功接收、理解和接受。。(所有拉去的货工厂全部加工完毕)

3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 。(所有拉去的货，工厂设备不够，让其他工厂帮忙加工)

4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 。(这十车货有质量问题，工厂不能正常加工)

5xx:服务端错误，服务器不能正确执行一个正确的请求。(工厂在加工到一半过程中断电，不能继续加工)

1xx:信息响应类，表示接收到请求并且继续处理。(所有拉去的货，工厂还没有加工完毕)

2xx:处理成功响应类，表示动作被成功接收、理解和接受。。(所有拉去的货工厂全部加工完毕)

3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 。(所有拉去的货，工厂设备不够，让其他工厂帮忙加工)

4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 。(这十车货有质量问题，工厂不能正常加工)

5xx:服务端错误，服务器不能正确执行一个正确的请求。(工厂在加工到一半过程中断电，不能继续加工)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航