Ajax的jQuery和原生js实现

Ajax简介

Ajax全称为 Asynchronous JavaScript And XML，译为异步的javasrcipt及XML，就是利用javascript执行异步网络请求，在不用刷新网页的情况下与后端服务器进行少量的数据交换。

原生js实现：

function AjaxByJsTest(){
				var xmlhttp;
				//1.创建XMLHttpRequest对象
					if (window.XMLHttpRequest){
					    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					    xmlhttp=new XMLHttpRequest();
					}else{
					    // IE6, IE5 浏览器执行代码
					    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
					}
				//2.连接服务器
				//第一个参数是get or post，第二个参数是指定url可加？后加参数，第三个为是否异步请求，一般为true
				xmlhttp.open("get", "url?parameters=value",true);
				//3.接受返回，当客户端与服务端有交互时都会调用onreadystatechange
				xmlhttp.onreadystatechange=function(){
				//当onreadystatechange=4且status=200时交互成功
				if(xmlhttp.readyState==4&&xmlhttp.status==200){
				//调用responseText获取返回的值，返回值是一段字符串
					var city=xmlhttp.responseText;
				//将字符串转化为json格式，然后就可以将json显示了
					var cityJson = eval("(" + city + ")");
											
				}
			};
			//4.最后记得发送请求
			xmlhttp.send();
			}

readyState存有放XMLHttpRequest 的状态。数值分别代表：

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中

4: 请求已完成，且响应已就绪

status状态码分别表示：

 200：服务器响应正常。
 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
 400：无法找到请求的资源。
 401：访问资源的权限不够。
 403：没有权限访问资源。
 404：需要访问的资源不存在。
 405：需要访问的资源被禁止。
 407：访问的资源需要代理身份验证。
 414：请求的URL太长。
 500：服务器内部错误

jQuery实现：

jQuery底层由js封装装好了，我们只需要导入jquery包使用$. ajax 方法即可：

function AjaxByjQueryTest(){
			$.ajax({
					url:"bookByPid.action",
					type:"post",
					data:"pid="+pid,
					dataType:"json", //返回的数据类型，要与服务器返回的一致
					async:true,		//是否一步
					timeout:null,	//设置请求超时
					//成功调用函数success
					success:function(data){
						//data为返回数据，的调用函数遍历json
						callback(data);
					},
					//失败调用函数error
					error:function(data){
						alert(data.status);
					}
				});
		}

另：

后端返回数据：

response.getWriter().write(jsonString);

返回的可以是String、json、xml或其他类型，但用jQuery实现时返回的数据类型要一致。

List转为json格式:

导入json包

JSONArray json = JSONArray.fromObject(List); //一个语句即可

Map类型转化亦是如此。