异步请求Ajax以及json

异步请求Ajax

       Asynchronous   Javascript  And  XML  缩写为 AJAX ，允许浏览器与服务器通信而无需刷新当前页面的技术叫做Ajax。

       XMLHttpRequest：该对象是对JavaScript的一种扩展，可使网页与服务器进行通信，是创建Ajax的最佳选择，实际上通常把Ajax当成XMLHttpRequest。

• XMLHttpRequest的方法

open("method","url")        method是请求方式，url是请求地址（比如xml配置的service地址） 

send(content)                   向服务器发送请求；           

setRequestHeader("header","value")           设置请求头部信息，在设置前必须先调用open

• XMLHttpRequest的属性

onreadystatechange :         状态改变事件，即可调用js函数                                                                                   

readyState:                          请求的状态                               

responseText:                      服务器的响应，表示为一个串

responseXML:                     服务器的响应，表示为XML                                 

status：                               服务器的http状态码（200响应为成功；404响应未找到；）                      

statusText：                        http状态码的对应文本       

   原生Ajax的具体过程：  

•   异步发送数据到服务器(Js)： 

1.创建XMLHttpRequest 对象：                    var  xhr = new XMLHttpRequest ();

2.定义请求方式和请求路径：                        xhr.open("请求方式","请求地址");

 3.发送数据(发送到url):                                  xhr.send(携带的参数)；

• 在服务端接收参数以及处理业务：

 例：servlet等中：

 处理业务，例：调用dao层的方法

发送到前端页面中：

 PrintWriter pw  =  response.getWriter();

 pw.writer(String内容);

 pw.flush();

• 异步接收服务器端的消息（Js）：

 //4.根据页面的请求状态码进一步处理：                         
      xhr . onreadystatechange  = function  (){
           // 5.判断请求码   0  1   2  3  4
               if(xhr.readyState==4){
                  //6.判断响应码      200交易成功
                   if(xhr.status==200){
                    7.接收响应结果    文本信息   /html/json   xml
                    var res = xhr.responseText;
                    alert(xhr.responseTest);
                }
            }
        }           

 举例子：

  例如为了实现如图的鼠标经过切换新品推荐，热卖推荐等一系列，异步刷新显示需要的业务，                                           

则：    获取他们的div中id或者class

在js中：

//获取对象
window.onload=function(){
 mrjx=document.getElementById("meiri_right_top");
    tu=document.getElementsByClassName("meiri_right_bottom_tu");
    phone=document.getElementsByClassName("bottom_phone");
    price=document.getElementsByClassName("bottom_price");
    
    //新品推荐
    mrjx.children[0].onmouseover=function (){
    	//发送请求
    	var xhr=new XMLHttpRequest();
    	xhr.open("post","phone");   //打开连接
    	xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    	xhr.send("action=newtj");  //发送数据，不发送任何参数
    	
    	xhr.onreadystatechange=function(){
    		if(xhr.readyState==4){
    			if(xhr.status==200){
    				var obj=eval("("+xhr.responseText+")");
    				for(var a in obj){
    					tu[a].children[0].src=obj[a].pic;
    					phone[a].innerHTML=obj[a].bname; //children[0].
    					price[a].innerHTML=obj[a].price;  //
    				}
    			}
    		}
    	}
    }

  在后台处理逻辑业务中：

//发送过来的action ，需要和方法进行匹配，是哪个就使用哪个方法

//热卖推荐
	
	  private void hotPhone(HttpServletRequest req,HttpServletResponse resp) throws IOException{ 
		  //业务 
		  List<Phone> list=pdao.sltAllNewPhone("select * from phone order by sale desc  limit 0,5"); 
		  Gson g=new Gson(); 
		  String res=g.toJson(list); 
		  PrintWriter ps=resp.getWriter();
		  ps.write(res);
		  ps.flush();
	  
	  }

Json

     json: string/number/boolean
        var obj={属性名:值,属性名:值}
        obj.属性名--》值
        var obj2=[1,2,{name:'zs',age:10},boolean];
        obj2[2].name
        
        在java中json是一种数据格式；"{\"name\":\"lisi\",\"age\":20}"
        Gson第三方工具：
        toJson-->转换为json串:Person(name/age)  toJson(new Person("lisi",20));
        fromJson-->将json串转换为类型对象(对象/集合。。。)