Ajax篇章(二)——核心对象XMLHttpRequest五步学会使用

前端之家收集整理的这篇文章主要介绍了Ajax篇章(二)——核心对象XMLHttpRequest五步学会使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

引言
XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象向http服务器发送请求并使用微软XML文档对象模型DOM处理回应。

同步和异步:
同步:程序的执行顺序与任务的排列顺序是一致的、同步的;提交一个表单必须重载整个页面
异步:程序的执行顺序与任务的排列顺序是不一致的、异步的。提交请求与返回数据不可见,不刷新页面而改变当前页面显示

一、XMLHttpRequest异步交互过程

Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法(GETPOST)来处理请求,并将目标URL设置到XMLHttpReques对象上。

Ajax如何首先处于异步处理状态?你不想等待,希望数据马上与服务端交互并返回结果。要完成它,你可以向XMLHttpRequest注册一个回调函数,并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器,当服务器响应到达时,回调函数将会被调用

服务器在解析请求参数后,servlet执行必需的应用逻辑,将响应序列化到XML中,并将它写回HttpServletResponse回到客户端,注册XMLHttpRequest上的回调函数现在会被调用来处理由服务器返回的XML文档。最后,通过更新用户界面来响应服务器传输过来数据,使用JavaScript来操纵页面HTML DOM


二、五步使用XMLhttpRequest

JavaScript

1、创建XMLHttpRequest对象
var xmlhttp;
        function submit(){
                 
                //1、创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    //IE7/8,FireFox,Mozilla,safari,Opera"
                    xmlhttp=new XMLHttpRequest(); 
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");                      
                    }                  
                }else if(window.ActiveXObject){
                    //IE6 IE6.5 IE5
                    var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"]; 
                    for(var i=0;i<activexName.length;i++){    
                    try{
                        xmlhttp=new ActiveXObject(activexName[i]);           
                           break;
                    }catch(e){}                
                }
              }
             
             if(xmlhttp==undefined || xmlhttp==null){
                alert("当前浏览器不支持穿件XMLHttpRequest对象,请更新浏览器");
                return;
             }

注意:
不同浏览器的创建方式

  一是IE6及以下版本,需要通过某一个正确的ActiveXObject控件的名称通过new ActiveXObject(控件名)的方式

  二是IE7及以上版本,firefoxchrome等非IE浏览器,直接newXMLHttpRequest()

2、注册回调函数

      xmlhttp.onreadystatechange=callback;
       //错误写法xmlhttp.onreadystatechange=callback();
             
       //获取文本框中用户输入的内容
      var userName=document.getElementById("UserName").value;

注意:
回调函数名后面不加括号。加括号代表将返回值注册给onreadystatechange属性,我们只需要将回调函数的名字注册给这个属性
详见下篇博客
实际上每次readyState发生变化时,就会触发回调函数。我们一般只关心状态4,表示响应完全被接收。

3、设置和服务器交互的相应参数
4、设置向服务器端发送的数据,启动和服务器的交互
5、判断和服务端交互是否完成,还要判断服务器端是否正确返回了数据

//3、设置和服务器交互的相应参数
 var url = "user?name="+userName;
 xmlhttp.open("GET",url,true);
//4、设置向服务器端发送的数据,启动和服务器的交互
             xmlhttp.send(null);
          }
          
          function callback(){ 
            // 5、判断和服务端交互是否完成,还要判断服务器端是否正确返回了数据
              if(xmlhttp.readyState==4 ){  //表示和服务端交互完成     
                //正确返回了数据
                if(xmlhttp.status==200){
                  //纯文本数据接受方法
                  var message=xmlhttp.responseText;          
                
                  //向div标签中天后从文本内容方法
                  var div=document.getElementById("message");
                  div.interHTML=message; 
             }
          } 
       }
     
        </script>
    </head>
    
    
    <body>
        <input type="text" id="UserName"/>
        <input type="button" onclick="submit()" value="校验用户名"/>        
        <br/>  
        <!--用来接收服务端返回数据-->> 
        <div id="message"></div>
    </body>
</html>

注意事项:
open方法有5个参数,其中前三个必须写。
get方式:参数为位于url中,后面的方法参数直接写null值即可
post方式:先调用setRequestHeader方法,设置Content-Type的值,然后调用send方法,send的参数就是请求的数据。
第五步中的两个判断语句最好分开写,readyState的判断位于外层,status的位于内层。以便于分别处理服务器不是200响应的情况和readyState不是4的情况。

服务端(user.java)
<span style="font-size:18px;">package com.tgb.test;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class user extends HttpServlet { 

protected void processRequest(HttpServletRequest request,HttpServletResponse response)
            throws ServletException,IOException {
       
response.setContentType("text/html;charset=UTF-8");
       
        //是将结果以HTML的形式返回给客户端
        PrintWriter out = response.getWriter(); 
        try{
        //接收请求中传来的“name”参数的值
            String old=request.getParameter("name");
            if(old==null)
            {
                out.println("用户名不能为空");
            }else{
                String name=new String(old.getBytes("ISO8859-1"),"gb2312");
                System.out.println(name);
                if(name.equals("123")){
                //返回界面,html中message来接收
                    out.println("用户名["+name+"]已经存在,请使用其他用户");
                }else{
            out.println("用户名["+name+"]尚未存在,可以使用该用户注册");           
                }                      
           }           
       }finally{
           out.close();
       }
   }
}</span>

XML
<span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <welcome-file-list>
        <welcome-file>userverify.html</welcome-file>
    </welcome-file-list>
    <servlet>
        <servlet-name>user</servlet-name>
        <servlet-class>com.tgb.test.user</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
<servlet-mapping>
        <servlet-name>user</servlet-name>
        <url-pattern>/user</url-pattern>
    </servlet-mapping>
<session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    
</web-app> </span>

注意:
配置文件中的服务器名称必须要与实际相对应。


三、补充

1、readyState:表示XMLHttpRequest对象的状态。
状态
描述
0
Uninitialized
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1
Open
open() 方法调用,但是 send() 方法调用。请求还没有被发送。
2
Send
Send() 方法调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3
Receiving
所有响应头部都已经接收到。响应体开始接收但未完成。
4
Loaded
HTTP 响应已经完全接收。

2、写好的代码要在服务器端环境下运行,要将写好的东西,部署在本机服务器环境下,通过localhost来访问,方可看到效果,否则会报错!
原文链接:https://www.f2er.com/ajax/164668.html

猜你在找的Ajax相关文章