初识原生态ajax

前言

1 Ajax是一种网页开发技术，（Asynchronous Javascript+XML）异步JavaScript和xml，
2 Ajax是异步交互，局部刷新
3 Ajax是减少服务器压力
4 Ajax能提高用户体验

Ajax交互与传统交互比较

传统交互：网页整体刷新（同步），服务器压力大，用户体验不好
Ajax交互：局部刷新，服务器压力小，用户体验好

不妨先来一个实例，先从整体把握，在细节看
首先是jsp页面：

<div style="text-align: center;">
    <div>
    <input type="button" value="ajax异步交互" onclick="loadname()"/>&nbsp;&nbsp;<input type="text" name="name" id="name"/>
    </div>
</div>

有个按钮事件，用于验证ajax

<script type="text/javascript">
	function loadname(){
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}
		else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.open("post", "getajaxname?name=666&age=16", true);
		xmlHttp.send();	
	}
	</script>

这段作用是利用ajax异步向后台传了两个参数name=666与age=16，路径是getajaxname为一个servlet路径，通过post方式

后台servlet

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html,charset=utf-8");
		PrintWriter out = response.getWriter();
      String name= request.getParameter("name");
      String age= request.getParameter("age");
      System.out.println(name);
      System.out.println(age);
		out.flush();
		out.close();
	}

这里接受前台传来的参数并打印出来

Web.xml文件
<servlet>
    <servlet-name>getajaxname</servlet-name>
    <display-name>This is the display name of my J2EE component</display-name>
    <description>This is the description of my J2EE component</description>
    <servlet-class>com.zwl.servlet.getajaxname</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>getajaxname</servlet-name>
    <url-pattern>/getajaxname</url-pattern>
  </servlet-mapping>

主要是映射一个servlet

至此入门程序算是完成，下面将对上述部分进行分析

创建XMLHttpRequest对象

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

var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}
		else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}

XMLHttpRequest 对象请求后台

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或POST
url：文件在服务器上的位置
async：true（异步）或false（同步）

send(string)
将请求发送到服务器。
string：仅用于POST 请求

语法：

xmlHttp.open("post", "getajaxname?name=666&age=16", true);
xmlHttp.send();

有时候需要将参数封装在一个函数中
首先得声明setRequestHeader(header,value)

向请求添加HTTP 头。
header: 规定头的名称
value: 规定头的值
创建语法：

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

将入门程序部分代码修改如下：

xmlHttp.open("post", "getajaxname", true);
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=666&age=16");

XMLHttpRequest 对象响应服务器

现在在前面的代码基础上添加几行代码

alert("readystate:"+xmlHttp.readyState+" status:"+xmlHttp.status);
		xmlHttp.onreadystatechange=function(){
			alert("readystate:"+xmlHttp.readyState+" status:"+xmlHttp.status);
		};
		
		xmlHttp.open("post", "getajaxname", true);
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=666&age=16");

先分析一下onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState 改变时，就会触发onreadystatechange 事件。
readyState 属性存有XMLHttpRequest 的状态信息。

下面是XMLHttpRequest 对象的三个重要的属性：
onreadystatechange存储函数（或函数名）
每当readyState 属性改变时，就会调用该函数。

readyState
存有XMLHttpRequest 的状态。从0 到4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status
200: “OK”
404: 未找到页面

执行上面程序就会发现相应值的变化

接下来在后台加入返回的信息
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

    response.setContentType("text/html,charset=utf-8");
    PrintWriter out = response.getWriter();
//向前台返回一个信息
  out.println("ajax ok");
    out.flush();
    out.close();
}

页面：根据前面的状态码，进行接收参数

if(xmlHttp.readyState==4 && xmlHttp.status==200){
				document.getElementById("name").value=xmlHttp.responseText;
			}

responseText 获得字符串形式的响应数据

最后会发现表单被自动填充