前端-AJAX

AJAX（asynchronous JavaScript and xml）

服务器给客户端的响应一般是整

Ajax

工作原理：

相当于在用户和服务器·之间加上一个中间层，使得服务器和用户操作响应异步化，只有确认要从服务器得到新数据时！才由ajax引擎代服务器提交请求，响应后返回xml格式。再由ajax解析后交给浏览器。

（旧的交互式，每次返回请求都会返回整个html页面，而ajax只返回需要的，从而没有了页面重载（白屏）等待）

个页面，但是ajax可以实现局部刷新。

Ajax的优点

利用客户端闲置的处理能力处理服务器的一些工作，降低了服务器和宽带的负担。

AJAx发送异步请求的步骤

1. 得到XMLHTTPRequest
2. 打开与服务器的连接（open）【open(请求方式,请求的URL,请求是否异步)】 
3. 发送请求（send）
4. 在XMLHTTPRequest对象上加一个监听器onreadystatechange；

状态码	意义
0	刚创建，未调用open
1	请求开始，调用open，未调用send
2	调用send
3	服务器开始响应，但并不表示响应结束
4	服务器响应结束

 

 

 

 

 

 

 

//-----------------GET-------------------------------
//创建XMLHttpRequest
var xmlHttp = new XMLHttpRequest();
//打开服务器
xmlhttp.open("GET","/Aservlet",true);
//发送请求
xmlhttp.send(null);
//设置状态变动监听器
xmlhttp.onreadystatechange=function(){

var state=xmlhttp.readystate  //得到XMLHTTPRequest状态  0  1  2 3 4
var status=xmlhttp.status    //得到响应的状态码

if(state == 4 && status == 200){
    var content = xmlHttp.responseText  //得到响应的文本内容
    var content = xmlHttp.responseXML    //得到XML响应内容
}

}

//----------------------------------POST------------------------------------------

1. 在open的时候， open("POST".....)
2.需要添加一步，设置content-Type请求头
        xmlHttp.setRequestHeader("content-Type","application/x-wwww-form-urlencoded")
3.send("参数列表")

AJAx方法和属性

用于请求=)

Open(“methord”,”url”, async)

建立对服务器的调用。

Methord：get ,post；

 GET请求参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送服务器。

url：文件在服务器上的位置

Async:true(异步)，false（同步）一般使用true；

 GET适合小数据。(通常不大于2KB)，POST适合数据量大的。(理论上不受限制)

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
 GET请求的数据会被浏览器缓存起来(安全性差)
 GET方式和POST方式传递的数据在服务器端的获取也不相同。

 

Send（String）

语义：向服务器发送请求。

String：只针对post方式

Abort（）

停止当前请求。

 

setRequestHeader(“header”,”value”)

设置指定的首部的值在设置前必须调用open（）；

（向请求添加 HTTP 头。header: 规定头的名称 value: 规定头的值）

注：当使用post方式发送请求时.

post请求必须设置Content-Type值为application/x-form-www-urlencoded

 

 

setRequestHeader方法只是XMLHTTP为添加或修改HTTP头提供的一个接口方法而已， 
至于里面的值则是HTTP协议的含义，当然也可以发自己的东西进去，即使IIS不能识别你的信息也不会报错

 

 

例子：使用两种不同方式请求

get方式：

xmlhttp=new XMLHTMLRequest();

xmlhttp.open("GET","demo_get.asp",true);

xmlhttp.send();

由于get会存在缓存，所用必须在向 URL 添加一个唯一的 ID：

这样就不会得到之前缓存的结果。

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

xmlhttp.send();

post方式

xmlhttp=new XMLHTMLRequest();

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

 

 

 

getAllResponseHeaders()

返回http请求的所有响应首部的键/值对

getResponseHeader(“header”)

返回指定响应的首部的串值

 

（=用于响应=）

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。（服务器响应不是xml格式）
responseXML	获得 XML 形式的响应数据。（服务器响应是xml格式）

 

其他

属性：readyState

                            返回就绪状态。

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

 

 

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState改变时（也就是状态改变时），就会触发该事件。

 

AJAX-利用JQuery实现

       //添加商品
         $("#addCommodity").click(function(){
        	 if(validate($("#coPrice").val())&&isNullstr($("#coName").val())){
        		 
        		 
        	 $.ajax({
     		    cache: false,
     		    type: "POST",
     		    url:"<c:url value='/root/json_jsonAddCommodity.action' />",
     		    data:$("#myform").serialize(),
     		    async: true,
     		    dataType:"json",
     		    success:function (data){
     		    	var e=eval(data);
     		    	
     				   $("#information").text(e.information);
     		    	if(e.result){
     		    		page=1;
     		    		loadCommodity(e);
                    	
                    	
                    	
     		    	}
     		    },
                error: function(){
                	
                  	 window.location.href='<c:url value='/error.jsp'/>';
                   }
     		    
     		});
        	 $("#coName").val("");
          	$("#coPrice").val("");
          	$("#coImage").val("");
        	 }
        	 else{
        		  $("#information").text("请正确填写商品信息");
        		  $("#coName").val("");
              	$("#coPrice").val("");
              	$("#coImage").val("");
        	 }
         });