首页 > 代码库 > Ajax核心对象——高速上手XmlHttpRequest

Ajax核心对象——高速上手XmlHttpRequest

引言:

   非TGB的。直接跳过吧……

   从开学结束JQuery之后,计算机的进度停了一段时间。某天无聊的时候,又又一次把BS的东西拿过来看了看。

发现里面有非常多既熟悉又陌生的东西。

   在学习王兴魁老师的Ajax的时候,里面的东西,大多都是之前学过的。在学习JS的时候。有非常多js资料。

非常多人看的都是牛腩js和姜浩的js。可是我师父让我看李炎恢的js

刚開始的时候感觉挺怪的。牛腩的js一周,姜浩的js 一周。李炎恢的js 150据说至少看三个星期。

   尽管感觉压力大了点。

可是等真正看的时候。才发现这150集的内容挺实用的。前面解说的很基础。后面通过一个项目,解说了JQuery是怎样从js封装过来的。以及Ajax的入门技术。

   在看Ajax的时候,发现基本里面全是学过的东西。如今来学习一下Ajax的基础。并看一个实例。

 

Ajax基础:

 

上面啰嗦了半天,如今进入正题。

 

什么是Ajax

     Ajax缩写:AsynchronousJavaScript and XML 也就是 异步的 jsxml

   利用Ajax能够在向server请求数据的时候。client不进行刷新。

 

   就是client与server的交互,能够不间断的进行。

   即:client发送的请求。不影响client的使用。

 

同步与异步的差别?

同步:

   client向server请求一个数据,页面又一次载入(刷新)。

异步:

   client请求数据。

页面上直接得到而不须要刷新

 

   Ajax技术。能够使得web页面更加友好。不会由于操作一小块的内容,使得整个页面进行刷新。

   Ajax的核心技术,就是XmlHttpRequest对象(简称XHR)。这个对象的作用。就相当于。client的秘书。

 

传统的页面设计:

   技术分享

   当请求数据的时候,须要等待server传回数据之后才干进行下一步操作。(可能造成无响应的状态)

 

Ajax方式的页面:

   技术分享

   client发送请求数据的操作之后,仍然能够继续使用。(不会刷新页面)比方,百度的搜索框。不会由于你填写了内容 而停止响应。

 

XmlHttpRequest对象,作为client的“秘书”与server进行交互。

 

传统Web页面与Ajax方式Web页面的对照

   技术分享

 

Ajax入门:五步学会XmlHttpRequest

    html页面:

 

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <script type="text/javascript">                ?
                var xmlhttp;
                function submit() {
                    //此处省略1-4步骤
                }
                function callback() {
                    //此处省略5步骤  
                }
            </script>
    </head>
    <body>       
        <div>username:</div>
        <input type="text" id="userName"/>
        <input type="button" onclick="submit()" value="http://www.mamicode.com/校验" />
        <br />
        <div id="message"></div>
    </body>
</html>


以下是五步流程:

1、创建XmlHttpRequest对象

 //1.创建xmlHttpRequest对象
                    if (window.XMLHttpRequest) {
                        //IE7,IE8,FireFox,Mozillar,Safari,Opera
                        //alert("IE7,IE8,FireFox,Mozillar,Safari,Opera");
                        xmlhttp = new XMLHttpRequest();
                        if (xmlhttp.overrideMimeType) {
                            xmlhttp.overrideMimeType("text/xml");
                        }
                    } else if (window.ActiveXObject) {
                        //IE6,IE5.5,IE5
                        var activeName = ["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 < activeName.length; i++) {
                            try {
                                xmlhttp = new ActiveXObject(activeName[i]);
                                break;
                            } catch (e) {

                            }

                        }
                    }
                    if (xmlhttp === undefined || xmlhttp === null) {
                        alert("当前浏览器不支持创建xmlhttprequest对象,请更换浏览器");
                        return;
                    }

2、注冊回调函数

                    //2.注冊回调方法
                    xmlhttp.onreadystatechange = callback;

    注:在注冊回调函数的时候,仅仅须要把函数名赋值就可以。假设 赋值callback().则赋值为 函数运行的结果值。

3、设置与server交互的參数

                    //3.设置和server交互的对应參数(Get)
                    var userName=document.getElementById("userName").value;
                        xmlhttp.open("GET", "Ajax?name=" + userName, true); //true 表示异步的方式
                    //3.设置和server交互的对应參数(Post)
                    //xmlhttp.open("POST","AJAX",true); 
                    //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");                     
                    

4、向server发送数据

                    //4.设置向server发送的数据。启动和server端的交互
                        xmlhttp.send(null);

 

5、推断与server交互是否完毕,并推断是否有返回数据

                        //5.推断server端的交互是否完毕,还要推断server端是否返回了数据
                        if (xmlhttp.readyState === 4) {
                            //表示和server端的交互已经完毕            
                            if (xmlhttp.status === 200) {
                                //表示server的响应代码是200,正确的返回了数据
                                //纯文本接受数据方式
                                var message = xmlhttp.responseText;
                                //xml数据相应的dom对象的接受方法
                                //使用的前提是。server端须要设置content-type为text/xml
                                //var domXml=xmlhttp.responseXML

                                var messageNode = document.getElementById("message");
                                messageNode.innerHTML = message;

                            }
                        }

注:理解困难的。能够去研究一下xmlhttprequest对象的属性及事件。


唯独以上的html。执行结果肯定有问题…… 执行都没有Webserver。

单纯html客户跟谁交互?

 

此时,应该创建Webserver。使用tomcatserver创建servlet

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
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;

/**
 *
 * @author 赵崇
 */
public class Ajax extends HttpServlet {

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        try (PrintWriter out = response.getWriter()) {
            /* TODO output your page here. You may use following sample code. */
            String old=request.getParameter("name");
            if(old==null){
                    out.println("username不能为空");
            }else{
                String name=new String(old.getBytes("ISO8859-1"),"gb2312");
                System.out.println(name);
                if(name.equals("zhaochong")){
                        out.println("username["+ name+"]已经存在。请使用其它username");
                }else{
                        out.println("username["+ name+"]尚未存在,请使用其它username");
                }
            }
        }
    }


在创建servlet的时候,仅仅须要改动processRequest函数中的内容。创建servlet的时候,请自己主动生成xml

    技术分享

 

   以上Demo是在NetBean IDE上进行的。尽管这么一个小样例。发现里面有好多都不懂……比方tomcat与glashfish的差别 以及xml文件里内容的含义等等。

看视频的时候,眼看偏了,忽略了 开发环境的配置。

 

总结

   通过以上一个小样例,能够初步了解一下Ajax与传统页面的差别。更加深入的理解,须要在多次反复,在项目中应用,才干熟练掌握。


 

 

 

Ajax核心对象——高速上手XmlHttpRequest