详解AJAX技术

1.为什么要用？

在对接支付宝支付的时候需要在初始化的时候设置一个地址值，这个就是用于支付成功后跳转的地址值。

aliPayConfig.setReturnUrl("http://127.0.0.1");

但是，在对接微信Native支付方式的时候，当扫码付款完成以后客户端并不会跳转，这时候需要AJAX技术来实现异步的刷新网页，在前端不断的发送请求，请求后端的api，通过订单好查询数据库中的支付状态，如果成功支付则跳转。

2.什么是AJAX技术？

AJAX的全称是Asynchronous JavaScript and XML，意思就是异步的JavaScript和XML，用于快速创建动态的网页技术，该技术实现了服务器和客户端少量数据交换条件下实现网页的动态更新，意味着无需重新加载整个网页。

3.XMLHttpRequest

AJAX是基于XMLHttpRequest技术实现的，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户 *** 作的情况下，更新页面的局部内容。使用XMLHttpRequest时必须先实例化一个对象。

var xmlhttprequest = new XMLHttpRequest();

4.实际使用 4.1 在JavaScript中嵌入AJAX

其中open方法只能在JavaScript中使用

	
		
		
		
		
		
		


ajax request

4.2在jQuery中使用

jQuery中集成了很多的JavaScript类库。

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

// 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");
});
// ajax--post 请求
$("#postBtn").click(function(){
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function 	  (data){
		$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});