Ajax&Json<2>Ajax核心

XMLHttpRequest 对象创建

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某
部分进行更新。

<script type="text/javascript">
	function loadName(){
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.open("get","getAjaxName",true);
		xmlHttp.send();
	}
</script>

XMLHttpRequest 对象请求后台

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
setRequestHeader(header,value)
向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
为 True 的话，表示的是异步，异步表示程序请求服务器的同时，程序可以继续执行；能提高系统的运行效率；
为 False 的话，表示同步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会
挂起或停止。
我们一般都是用 True；

GetAjaxNameServlet.java

package com.ruanku.web;

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 GetAjaxNameServlet extends HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {
		// TODO Auto-generated method stub
		this.doPost(request,response);
	}

	@Override
	protected void doPost(HttpServletRequest request,IOException {
		String name=request.getParameter("name");
		String age=request.getParameter("age");
		System.out.println("name="+name);
		System.out.println("age="+age);
		response.setContentType("text/html;charset=GBK"); 
		PrintWriter out=response.getWriter();
		out.print("ajax返回的文本");
		out.flush();out.close();
	}
	
	
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>AjaxJsonchap01</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  <servlet-name>getAjaxNameServlet</servlet-name>
  <servlet-class>com.ruanku.web.GetAjaxNameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>getAjaxNameServlet</servlet-name>
  	<url-pattern>/getAjaxName</url-pattern>
  </servlet-mapping>
</web-app>

ajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function loadName() {
		var xmlHttp;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		} else {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//xmlHttp.open("get","getAjaxName?name=jack&age=11",true);
		//xmlHttp.open("post",true);
		//xmlHttp.send();
		xmlHttp.open("post",true)
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=jack&age=11");
	}
</script>
</head>
<body>
	<div style="text-align: center;">
		<div>
			<input type="button" onclick="loadName()" value="Ajax获取数据" /><input
				type="text" id="name" name="name" />
		</div>
	</div>
</body>
</html>

原文链接：https://www.f2er.com/ajax/164005.html

猜你在找的Ajax相关文章