9月4号总结-Ajax

1.Ajax 简介

1.1Ajax 是什么？

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

1.2Ajax 技术应用场景？

**Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:

• 商品系统。
• 评价系统。
• 地图系统。
• …..

  AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。**
  
  

2.2 Ajax入门代码简易实现

第一步:服务端代码设计

创建AjaxController类,用于处理客户端请求

package com.cy.ajax.controller;@Controller  
@RequestMapping("/")  
public class AjaxController { @RequestMapping("doAjax01UI") public String doAjax01UI() { return "ajax-01";  
          } //处理ajax请求的服务端设计  @RequestMapping("doAjaxGet") @ResponseBody //将方法返回值以字符串形式进行输出  public String doAjaxGet() throws Exception{  
                  System.out.println("==doGet()=="); //Thread.sleep(3000);//模拟耗时操作  return "Ajax Get request result";  
          }  
            
}

第二步:客户端代码设计

客户端页面关键dom元素设计:

//Ajax方式的请求 function doAjaxGet(){//错误调试:debugger,console.log(),排除法  //1.创建XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听(将服务端响应的结果更新到ajaxResultId位置) xhr.onreadystatechange=function(){ //console.log(xhr.readState);  if(xhr.readyState==4&&xhr.status==200){  
                     console.log(xhr.responseText);  
                   document.getElementById("ajaxResultId").innerHTML=xhr.responseText;  
                }  
           }; //3.建立连接 xhr.open("GET","http://localhost/doGet",true);//true表示异步(底层会启动线程与服务端通讯)  //4.发送请求 xhr.send();  
}

3. Ajax 基本业务实现

3.2 服务端关键代码实现

---

在服务端AjaxConotroller中添加如下代码,处理客户端请求:

private List<String> names=new ArrayList<String>();//假设这是存储数据的表  @RequestMapping("doAjax02UI") public String doAjax02UI() { return "ajax-02";  
          } /**通过此方法校验名字是否存在*/  @RequestMapping("doCheck") @ResponseBody  public String doCheck(String name) { if(names.contains(name)) return "名字"+name+"已经存在,请选择其它名字"; return "名字"+name+"不存在,可以注册";  
          } /**将客户端请求数据写入到names对应的集合*/  @RequestMapping("doSave") @ResponseBody  public String doSave(String name) {  
                  System.out.println("name="+name);  
                  names.add(name); return "save ok";  
          }

3.3 客户端关键代码实现

构建ajax-02页面,然后添加关键元素.

第一步:html关键表单元素设计

<h1>The Ajax 02 Page</h1>  
<fieldset>  
   <legend>Ajax 表单请求</legend>  
   <form>  
      <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">  
      <input type="button" onclick="doSave()" value="Save">  
   </form>  
   <span id="result"></span>  
</fieldset>

第二步:添加JS关键业务代码

<script type="text/javascript">  
    function doClear(){  
            document.getElementById("result").innerHTML="";  
    }  
     
    function doSave(){ //1.创建XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){  
                      document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";  
                 }  
            }; //3.打开链接  //var name=document.getElementById("nameId").value; var  name=document.forms[0].name.value;  
            xhr.open("POST","/doSave",true); //post请求要设置请求头(规定) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.发送请求 xhr.send("name="+name);//Post请求send方法传值 }  
     
    function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在  //1.创建XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){  
                     document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";  
                }  
           }; //3.打开链接  //var name=document.getElementById("nameId").value; var  name=document.forms[0].name.value;  
           console.log("name",name);  
           xhr.open("GET","/doCheck?name="+name,true); //4.发送请求 xhr.send(null);//Get请求send方法传值 }