AJAX_在原生JS和jQuery中的使用

原生JS中的使用

function test(){
	//从页面获得需要提交处理的数据
	var data=$(...).val();
	
	//ajax提交
	//1.获得XMLHttpRequest对象
	var req=new XMLHttpRequest();
	
	//2.设置请求
	//参数1：请求方式  参数 2：url  参数3：是否为异步请求
	//get
//	req.open("get","AjaxServlet?username="+username,true);
	//post
	req.open("post","AjaxServlet",true);
	req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	//3.发送请求
	//get
//	req.send(null);
	//post
	req.send("username="+username);
	
	//4.接收服务器响应的内容(确保服务器端响应成功后再去获取响应的内容)
	/*onreadystatechange:每次状态改变触发事件
	readystate：
		0:未初始化
		1：正在加载
		2：加载完毕
		3：交互
		4：完成
	*/	
	req.onreadystatechange=function(){
		//判断状态是否为4
		if(req.readyState==4){//交互完成
			if(req.status==200){
				var str=req.responseText;//响应的文本内容
				//如果是对象、数组或者集合，servlet以json格式传输
				//接收到的是json格式的字符串
				//将json格式字符串转为json对象  eval()
				var arr = eval("("+str+")");
				//之后可以进行正常的索引操作，对象属性可以通过.属性名获取
				for(var i=0;i<arr.length;i++){
					alert(arr[i].name);
				}
			}
		}
	}
}

jQuery中的使用，大大简化

function test(){
	/*
	参数1: url  
	参数2：请求参数 （可选） 
	参数3：回调函数  
	参数4：响应的数据格式(text,json,xml,html)
	*/
	$.get("AjaxServlet",{"account":"zhs","password":"123"},function(data){
		alert(data);
		alert(data.name+"-"+data.account);
	},"json");
	
	$.post("AjaxServlet",{"account":"zhs","password":"123"},function(data){
		alert(data);
		alert(data.name+"-"+data.account);
	},"json") 
	
	//ajax()
	$.ajax({
		url:"AjaxServlet",//请求的url
		data:{"account":"zhs","password":"123"},//请求参数
		type:"get",//请求方式
		dataType:"json",//响应数据格式
		async:true,//是否为异步请求
		success:function(data){
			alert(data.name);
		}
	}) 
	
	//load() 加载服务器数据放到指定的标签中
	//$("p").load("second.jsp");
	//$("p").load("second.jsp span");
	//url,请求参数,回调函数
	$("p").load("AjaxServlet",{"account":"zhs","password":"123"},function(responseText,statusText,xhr){
		/* alert(responseText)
		alert(statusText)
		alert(xhr) */
		eval("("+responseText+")")
	})
}

Servlet中数据处理回调给AJAX

package com.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

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

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.aowin.model.User;

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取请求参数
		String username = request.getParameter("username");
		//通过输出流进行响应
		//servlet响应对象给客户端  
		//json格式：轻量级的数据转换格式  {"属性名":"属性值","属性名":"属性值",...}
		User u = new User("zhs","123","张三");
		JSONObject.toJSONString(u);
		//String json="{'account':'zhs','password':'123','name':'张三'}";
		
		ArrayList<User> al=new ArrayList<>();
		al.add(u);
		al.add(new User("lsii", "123", "李四"));
		
		//是集合或是数组数据 json [{'account':'zs'},{'account':lisi}]
		String json = JSONArray.toJSONString(al);
		PrintWriter out = response.getWriter();
//		out.print(u);
		out.print(json);//将json格式字符串响应给客户端
		out.flush();
		out.close();		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}