AJAX请求

AJAX请求

什么是AJAX请求

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax 是一种浏览器通过 js 异步发起请求， 局部更新页面的技术。

Ajax 请求的局部更新， 浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

#发起AJAX请求#

1. 创建XMLHttpReq对象
2. 调用open方法设置参数
3. 调用send方法发送请求
4. 在send方法前绑定onreadystatechange事件,处理请求完成后操作

---

function ajaxRequest() {
 // 1、我们首先要创建XMLHttpRequest 
var xmlhttprequest = new XMLHttpRequest();
  //2、调用open方法设置请求参数
xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
  //4、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
xmlhttprequest.onreadystatechange = function(){
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
	alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
	var jsonObj = JSON.parse(xmlhttprequest.responseText);
	// 把响应的数据显示在页面上
	document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
		}
}
 // 3、调用send方法发送请求
	xmlhttprequest.send();

类AjaxServlet代码(用于响应AJAX请求)

---

protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("Ajax请求过来了");
    Person person = new Person(1, "张三");
    try {
        Thread.sleep(3000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);

    resp.getWriter().write(personJsonString);
}

JSON点这理

JSON是客户端和服务端之间业务数据的传递格式

jQuery中的AJAX请求

$.ajax 方法

• url 表示请求的地址
• type 表示请求的类型 GET 或 POST 请求
• data 表示发送给服务器的数据
  • 格式有两种：
    
    一： name=value&name=value
    
    二： {key:value}
• success 请求成功， 响应的回调函数
• dataType 响应的数据类型
  • 常用的数据类型有：
    • text 表示纯文本
    • xml 表示 xml 数据
    • json 表示 json 对象

---

// ajax请求
$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/json/ajaxServlet",
		//调用servlet方法
		// data:"action=jQueryAjax",			
		data:{action:"jQueryAjax"},
		type:"GET",
		success:function (data) {
			// alert("服务器返回的数据是：" + data);
			// var jsonObj = JSON.parse(data);
			$("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
		},
		//返回数据的格式
		dataType : "json"
	});
});

$.get 方法和 $.post 方法

• url 请求的 url 地址
• data 发送的数据
• callback 成功的回调函数
• type 返回内容格式，xml, html, script, json, text, _default。

---

// ajax--get请求
$("#getBtn").click(function(){

	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
		$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
	
});

$.getJSON 方法

• url 请求的 url 地址
• data 发送给服务器的数据
• callback 成功的回调函数

---

// ajax--getJson请求
$("#getJSONBtn").click(function(){
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) {
		$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
	});
});

表单序列化 serialize()

• serialize()可以把表单中所有表单项的内容都获取到， 并以 name=value&name=value 的形式进行拼接。

---

// ajax请求
$("#submit").click(function(){
	// 把参数序列化，通过requst请求发送过去
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
		$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
	});
});