(Servlet)Ajax

我不是女神ヾ 2021-10-06 13:16 1293阅读 0赞

#### **Ajax的定义** ####

*  Asynchronous JavaScript and Xml 异步的JavaScript和Xml
 *  Ajax是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发送请求
 *  服务器返回部分数据，而不是一个完整的页面，以页面无数新的效果更改页面中的局部内容

#### **Ajax工作原理** ####

![Ajax工作原理][Ajax]

#### **如何获得Ajax对象** ####

--------------------

#### **异步对象的属性和方法** ####

<table> 
 <thead> 
  <tr> 
   <th>属性/方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>abort()</td> 
   <td>取消请求</td> 
  </tr> 
  <tr> 
   <td>getAllResponseHeaders()</td> 
   <td>获取相应的所有Http头</td> 
  </tr> 
  <tr> 
   <td>getResponseHeader()</td> 
   <td>获取指定的Http头</td> 
  </tr> 
  <tr> 
   <td>open(method,url)</td> 
   <td>创建请求，method请求类型 get post</td> 
  </tr> 
  <tr> 
   <td>send()</td> 
   <td>发送请求</td> 
  </tr> 
  <tr> 
   <td>setRequestHeader()</td> 
   <td>指定请求的Http头</td> 
  </tr> 
  <tr> 
   <td>onreadystatechange</td> 
   <td>发生任何状态变化时的事件控制对象</td> 
  </tr> 
  <tr> 
   <td><strong>readyState</strong></td> 
   <td>请求的状态</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>0尚未初始化</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>1正在发送请求</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>2请求完成</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>3请求成功，正在接收数据</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>4数据接收成功</td> 
  </tr> 
  <tr> 
   <td>responseTest</td> 
   <td>服务器返回的文本</td> 
  </tr> 
  <tr> 
   <td>responseXML</td> 
   <td>服务器返回的xml，可以当做DOM处理</td> 
  </tr> 
  <tr> 
   <td><strong>status</strong></td> 
   <td>服务器返回的http请求响应值常用的有：</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>200 表示请求成功</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>202 请求被接受，但处理未完成</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>400 错误的请求</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>404 资源未找到</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>500 内部服务器错误，如asp代码错误等</td> 
  </tr> 
 </tbody> 
</table>

#### **onreadystatechange** ####

*  onreadystatechange:绑定一个事件处理函数，该函数用来处理readystatechange事件
 *  **注:**当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件

#### **readyState** ####

*  readyState：一共有5个值，分别是0,1,2,3,4，分别表示Ajax对象与服务器通信的状态
 *  比如，当值为4时，表示Ajax对象已经获得了服务器返回的所有的数据

--------------------

#### **发送异步请求的步骤** ####

*  **1、获取Ajax对象**：获取XMLHttpRequest对象实例
 *  **2、设置回调函数**：为Ajax对象的readystatechange事件设定响应函数
 *  **3、创建请求**：调用XMLHttpRequest对象的open方法
 *  **4、发送请求**：调用Ajax对象的send方法

#### **1、获取Ajax对象** ####

#### **2、编写回调事件处理函数** ####

xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4 && xhr.status == 200){
            var txt = xhr.responseText;
            //DOM操作
        }
    }

#### **3.1、创建请求-GET请求** ####

xhr.open('get','xx.do',true);

*  **注意：**
 *  **true：**表示发送异步请求（当Ajax对象发请求时，用户仍然可以对当前页面做其他的操作）
 *  **false：**表示发送同步请求（当Ajax对象发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作）

#### **3.2、创建请求-POST请求** ####

xhr.open('opst','xx.do',true);
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

*  setRequestHeader的作用：因为HTTP协议要求发送post请求时，必须有content-type消息头，但是默认情况下xhr（即Ajax对象）不会添加该消息头，所以，需要调用setRequestHeader方法，添加这个消息头

#### **4、发送请求** ####

GET  请求  xhr.send(null)
    POST 请求  xhr.send(name =value & name = value...)

*  GET请求：  
    
    
     *  send方法内传递null
     *  若要提交数据，则在open方法的“URL”后面追加
     *  如：xhr.open(“get”,”xx.do?naem=value&name=value”,true)  
        \#\#\#\#**编写服务器端代码**
     *  服务器返回的一般是部分数据，比如一个简单的文本。

public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html,charset=utf-8");
        PrintWriter.out = response.getWriter();
        out.println("用户名已经存在");
    }

#### **Ajax的应用** ####

*  输入的值需要校验，如检测注册的用户名是否已被占用
 *  级联显示
 *  数据录入和列表显示在同一个页面
 *  不需要舒心的翻页

[Ajax]: /images/20211006/32ce79e107864225943e387d1a6f8a65.png