笔记: AJAX

概念：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

Question： 当注册一个网页的时候，填写完用户名，文本框刚刚失去焦点，马上提示该用户已经被注册。这肯定是访问了后台，但是页面也没有刷新呀。一般是用了AJAX。不重新加载整个页面的情况下与服务器进行交互。

语法：

1. JavaScript：

function getInfo()
{
	var xmlhttp;
	if (window.XMLHttpRequest){
            // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}else{	// IE6, IE5 浏览器执行代码
	    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
	    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                 var str = xmlhttp.responseText;
                 alert(str);
	    }
	}
	xmlhttp.open("GET","/url",true);
	xmlhttp.send();
}

代码解释：(以Java为例！)

首先是执行最下面的xmlhttp.open();之后发送给服务器处理，处理完成后执行onreadystatechange=function(){} ，在其中操作。

xmlhttp.open()的三个参数分别是：执行get/post方法，访问的URL地址， 是否为异步请求。

第一个参数：

GET，xmlhttp.open("GET","/url",true);  向服务器发送数据就只能在URL中带过去，/url?data=123;

POST ，xmlhttp.open("POST","/url",true); 向服务器发送数据方法，需要设置一下请求头, setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //以form表单的形式提交，后台就可以像接受form表单数据一样接受数据。  xmlhttp.send("data=123");再向服务器发送数据。

第二个参数: /url    访问服务器的servlet。

第三个参数:

true 为异步操作，方法写在onreadystatechange=function(){}中。

false为同步操作, 方法直接写在send的后面，不需要onreadystatechange

 

解释：xmlhttp.readyState==4

readyState从 0 到 4 发生变化。

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status为访问状态，404 页面没找到， 500 内部错误， 200访问正常等。

• 1xx  -消息: 请求正在处理，请稍后。。。
• 2xx -成功处理
• 3xx -重定向到其他地方: 需要客户端再次发送请求
• 4xx -客户端错误，eg: 非法的资源请求，禁止访问
• 5xx -服务器段错误 ，eg: 服务器抛出异常

在Java中将处理结果的字符串，一般是以JSON字符串返回，存储在前端xmlhttp.responseText中。

2.  jQuery写法：

jquery将上述写法进行了封装，使得我们更加简单和方便的去使用ajax。常见用法：

$.ajax(function(){
    type: "post",
    url : "url",
    data: {"name":"Peter"}, 
    success:function(data, status){
       //处理
    },
    error:function(){
        //error有三个参数，可以依据情况需要写
    }
});

jquery还专门封装了$.get() 和 $.post()的ajax用法，分别执行get和post。