jQuery实现Ajax请求

jquery解决了什么问题

jquery 对 ajax的请求进行了封装，可以使代码更简洁,也自动替我们解决了，浏览器问题。

JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()。

load方法：

（传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式）

load(url,[data],[callback]);

* url:请求的服务器的资源地址

* data:向服务器端发送数据，JSON串格式.如果有此参数，就以POST方式提交数据，没有就是get方式提交数据

  *  callback:function(data,textStatus,xhr){}

data:服务器端返回的数据

textStatus:状态。succuss, error, notmodify, timeout

xhr：XmlHttpRequest对象本身

---

下面是一个 jquery 实现ajax 请求的实例：

效果 ： 页面加载完成时，自动发起ajax请求，从后台获取数据，并显示在页面表格中：

页面代码：

<a href="#" onclick="fun()">点击</a>
<div id="div1" style="width:100px;height:100px;border:1px solid blue"></div>

AJax请求：这里有参数传递，自动为post请求。

$("#div1").load("/javaScript/AjaxDemo3",{name:"huairen",password:"123456"},function(data,textStatus,xhr){
			
		});

后台 servlet 代码：

package com.test.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Collection;
import java.util.Date;

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.sun.xml.internal.ws.policy.privateutil.PolicyUtils.Collections;

import net.sf.json.JSONArray;

/**
 * Servlet implementation class AjaxDemo2
 */
@WebServlet("/AjaxDemo3")
public class AjaxDemo3 extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//转换为json格式
		System.out.println(request.getParameter("name"));
		System.out.println(request.getParameter("password"));
		ArrayList<User> data = new ArrayList<User>();
		User user1 = new User("user1","2323",13);
		User user2 = new User("user2","2323",13);
		User user3 = new User("user3","2323",13);
		java.util.Collections.addAll(data,user1,user2,user3);
		request.setAttribute("data",data);
		request.getRequestDispatcher("data.jsp").forward(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

效果：当访问这个页面时，自动获取后台数据，加载在页面表格中

 用Ajax传的数据后台也接收到了：