Ajax

Ajax

　　Ajax(Asynchronous JavaScript and XML，异步JavaScript和XML)技术主要完成页面的局部刷新，通过Ajax技术可以使之前的应用程序在每次提交时不用进行页面的整体刷新，从而提高操作的性能。

　　Ajax本身是一门综合性的技术，其主要应用包含了HTML、JavaScript、XML、DOM、XMLHttpRequest等页面技术，其中最重要的就是XMLHttpRequest。

XMLHttpRequest对象

　　在Ajax中主要是通过XMLHttpRequest对象处理发送异步请求和回应，要创建一个XMLHttpRequest对象则必须使用JavaScript，创建代码如下：

<script type="text/javascript">
    var xmlHttpReq;
    //获取xmlHttpRequest对象
    function getxmlHttpReq(){
        if (window.XMLHttpRequest){
　　　　　　　　//code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
          }else {
　　　　　　　　//code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }    
}
</script>

 

XMLHttpRequest对象中的属性

　　

onreadystatechange	指定当readState状态改变时使用的操作，一般用于指定具体的回调函数
readyState	返回当前请求的状态，只读
responseBody	将回应的信息正文以unsigned byte数组形式返回，只读
responseStream	以Ado Stream对象的形式返回响应信息，只读
responseText	接收以普通文本返回的数据，只读
responseXML	接收以XML文档形式回应的数据，只读
status	返回当前请求的http状态码，只读
statusText	返回当前请求的响应行状态，只读

 

readyState一共有5种取值，分别如下：

    0：请求没有发出（在调用open()函数之前）。

    1：请求已经建立但还没有发出（在调用send()函数之前）。

    2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。

    3：请求已经处理，正在接收服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应。

    4：响应已经完成，可以访问服务器响应并使用它。

向服务器发送请求

　　如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

　　xmlHttpReq.open(“get”,”text.txt”,true);

　　xmlHttpReq.send();

方法	描述
open(method,url,async)	规定请求的类型、url以及是否异步处理请求 method:请求的类型，get或post url:文件在服务器上的位置 async:true(异步)或false(同步)
send(String)	将请求发送到服务器 String：仅用于post请求
setRequestHeader(header,value)	向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值

　　get请求不能将请求参数设为send的实参；

　　post请求携带的数据作为send方法的实参，必须设置请求头。

　　setRequestHeader("Content-Type","application/x-www-form-urlencoded")

Ajax发送请求的步骤

    1、创建XMLHttpRequest对象xmlHttpReq

    2、为XMLHttpRequest对象的状态事件增加事件处理函数

    3、与服务器建立链接 xmlHttpReq.open(method,url,async)方法

    4、发送请求

       （1）如果是post请求，send中含有实参，必须设置请求头

       （2）get请求，不能将参数作为send()实参

    5、在第2步事件处理函数中，正常响应(status,200)且请求结束时(readyState,4)，将服务器的请求加载到网页（responseText）。

 

下面代码实现的功能是，用户在用户注册的文本框中输入用户名，文本框失去焦点后执行judgeuser()方法，判断输入的用户名是否为空或异步发送请求查询数据库中用户名是否存在。

<script type="text/javascript">
        //定义存储XMLHttpRequest对象
        var xmlHttpReq;
        //定义一个函数用于创建XMLHttpRequest对象
        function getxmlHttpReq(){
            if (window.XMLHttpRequest){
　　　　　　　　　　 //code for IE7+, Firefox, Chrome, Opera, Safari
                  xmlHttpReq=new XMLHttpRequest();
              }else {
　　　　　　　　　　 //code for IE6, IE5
                  xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
              }    
　　　　　}
        function judgeuser(username1){
            var userSpan = document.getElementById("userId");
            //没写用户名则在span元素中写入用户名不能为空
            if (username1.length <= 0) {
                userSpan.innerHTML = "用户名不能为空";
            }else{
                getXmlHttpReq();
                //为XMLHTTPRequest核心对象设置时间处理函数，如果XMLHTTPRequest核心对象有状态改变，该函数就会执行
                xmlHttpReq.onreadystatechange = function(){
                    if (xmlHttpReq.status == 200) {
                        if (xmlHttpReq.readyState == 4) {
                            userSpan.innerHTML = xmlHttpReq.responseText;
                        }
                    }else{
                        window.location.href="<%=path %>/building.jsp";
                    }
                };
    
　　　　//post请求            
　　　　var url="<%=path %>/UserServlet";
　　　　xmlHttpReq.open("post",url,true);
　　　　xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
　　　　xmlHttpReq.send("whichrequest=judgeUser&username="+username1); 

   　　//get请求
　　　　var url="<%=path %>/UserServlet?whichrequest=judgeUser&username="+username1;
　　　　xmlHttpReq.open("get",url,true);
　　　　xmlHttpReq.send();
           }
       }
</script>

 

 

jQuery 与 Ajax

　　jQuery 提供多个与 Ajax有关的方法。

　　通过 jQuery Ajax方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。编写常规的 Ajax代码并不容易，因为不同的浏览器对 Ajax的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 Ajax功能。

　　1、jQuery load() 方法

　　jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

　　$(selector).load(URL,data,callback);

　　参数：　　

　　url (String) :  发送请求的URL地址.

　　data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

　　callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)

　　这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。以上验证用户名的例子可以更改为：

<script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("[name='username']").blur(function(){
            //文本框中输入的值
　　　　　　　var un = $(this).val();
            var url = "<%=path %>/UserServlet";
            $("#userId").load(url,{"whichrequest":"judgeUser","username":un});
        });
    });
</script>

 

　　2、jQuery $.get()方法

　　$.get( url, [data], [callback] )：使用GET方式来进行异步请求。

　　参数：

　　url (String) :  发送请求的URL地址.

　　data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

　　callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

　　3、 jQuery $.post()方法

　　$.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

　　参数：

　　url (String) : 发送请求的URL地址.

　　data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

　　callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

　　type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

　　4、jQuery $.ajax()方法

　　这个是jQuery 的底层 AJAX 实现.

　　参数：

　　url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

　　type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

　　async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。

　　data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

　　dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：

　　　　xml：返回XML文档，可用JQuery处理。

　　　　html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。

　　　　script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。

　　　　json：返回JSON数据。

　　　　jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。

　　　　text：返回纯文本字符串。

　　success：要求为function类型的参数，请求成功后调用的回调函数，有两个参数。

        　　(1)由服务器返回，并根据dataType参数进行处理后的数据。

        　　(2)描述状态的字符串。

       　　function(data, textStatus){} //data可能是xmlDoc、jsonObj、html、text等等

　　error：要求为function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

　　　　function(XMLHttpRequest, textStatus, errorThrown){}//通常情况下textStatus和errorThrown只有其中一个包含信息

 

用户名验证的代码改写

<script type="text/javascript" src="<%=path %>/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    function judgename(name){
        if ($.trim(name).length <= 0) {
            $("#spanname").html("用户名不能为空");
            return;
        }else {
            $("#spanname").html("");
        }

　　　　　　$.ajax({

　　　　　　　　type:"post",

　　　　　　　　url:"<%=path %>/UserServlet ",

　　　　　　　　data:"whichrequest= judgeUser&username="+name,

　　　　　　　　success:function(resText){

　　　　　　　　　　$("#spanname").html(resText);

　　　　　　　},

　　　　　　 error:function(){
　　　　　　　　window.location.href="<%=path%>/building.jsp";

　　　　　　 }
　　　　})
　　}
　　</script>

 

转载于:https://www.cnblogs.com/ghq120/p/8179562.html