AJAX--异步JavaScript和xml

最新推荐文章于 2024-04-17 17:01:56 发布
最新推荐文章于 2024-04-17 17:01:56 发布
阅读量495 收藏
点赞数
分类专栏： JavaScript 文章标签： 异步 xml javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yana_li/article/details/52790999
版权
在学习ajax技术之前，我们看下传统的利用form表单的方式与后台进行数据交互的方式。
代码演示如下：
<!DOCTYPE html>
<html>
  <head>
    <title>testform1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

  <!-- 

  此时form中有三个参数：
  1.action：指向一个uri地址（由后台程序员提供）；
  2.method：表示请求的方法，有get和post两种方式，
  get：会将传的数据显示在地址栏上，而且get请求在服务器端编码需要特别的处理。
  所以，如果不是特别要求用get请求方式，尽量就不要用get请求。
  post：不会将数据显示在地址栏，但是这种请求方式也不安全，用专业的抓包工具可以在路由器端抓到你的信息，所以建议不要使用公共网络

   -->
    <form action="ajax.do" method="post" enctype="application/x-www-form-urlencoded">
        用户名：<input type="text" id="username" name="username">
        密码：<input type="password" id="password" name="password">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>
  </body>
</html>
代码运行结果（get方式）：

这里写图片描述

post方式运行结果：

这里写图片描述
这里写图片描述

由上面两个图片可以看出，虽然post请求数据不会被拼接到地址栏上，但是我们利用专业的网络抓包工具依然可以抓取到数据。所以建议大家安全用网。
看了上面传统的与后台交互数据的方式，我们发现，每次我们与后台交互时都要刷新一次页面，这样交互方式效率很低。下面我们就来介绍一下不用刷新页面就可以与后台进行交互的ajax方式吧。
代码演示如下：
<!DOCTYPE html>
<html>
  <head>
    <title>testajax.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">

    function getData(){
         /**
         * ajax的使用分四步走
         */

       //1、创建XMLHttpRequest对象，注意，IE6的兼容问题
       var xhr=new XMLHttpRequest();


       //2.打开连接，open方法有三个参数
            /**
             * 第一个是访问的请求方式
             * 第二个是访问服务器的URL
             * 第三个是一个Boolean值，true表示异步，
             * false表示同步，一般为异步，默认是true
             * 
             * 当请求是GET时，参数可以直接在URL后面拼接，如：
             * ajax.do?name=liujianhong&password=123
             * 当参数拼接时，一定要加?表示携带参数，当存在多个参数时，
             * 每个参数间使用&拼接，注意参数时键值对的方式，以等号连接
             */
       xhr.open("GET", "ajax.do",true);


       //3、ajax的回调函数
       xhr.onreadystatechange=function(){
           /**
             * 注意：回调函数会触发好几次，但是我们一般只会使用最后一次
             * 就是请求完成的触发,readState 等于4的时候
             */
            /**
             *  0   请求未初始化（在调用 open() 之前） 
             *  1   请求已提出（调用 send() 之前） 
             *  2   请求已发送（这里通常可以从响应得到内容头部） 
             *  3   请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应） 
             *  4    请求已完成（可以访问服务器响应并使用它） 
             */

             /**
             * readyState等于4表示请求已经结束，服务器响应完成
             * status表示http请求的状态，200表示正常响应
             * 400表示资源不可达（找不到）
             * 500表示服务器端错误
             */
          if(xhr.readyState==4 && xhr.status ==200){
              //说明请求完成，并且成功
              console.log(xhr.responseText);//得到服务器端的文本数据
              console.log(xhr.responseXML);//得到服务器端的XML数据
          }

       };

       /**
         * 发送数据，如果没有数据，可以不传递数据或者传递null,如:xhr.send(null);
         * 如果post请求传递数据，则这样写
         * 首先设置一下xhr的请求头信息
         * xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
         * 再这样传递参数
         * xhr.send(name=liujianhong&password=123);
         */
       xhr.send();
    }


      //下面代码是为了兼容IE6及其以下版本，现在可以不做考虑
/*          function ajaxFunction() {
                var xmlHttp;

                try {
                    // Firefox, Opera 8.0+, Safari
                    xmlHttp = new XMLHttpRequest();
                } catch(e) {

                    // Internet Explorer
                    try {
                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch(e) {

                        try {
                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch(e) {
                            alert("您的浏览器不支持AJAX！");
                            return false;
                        }
                    }
                }
                return xmlHttp;
            }*/
    </script>
  </head>

  <body>
    <button onclick="getData();">clickMe</button>
  </body>
</html>
运行结果如下：

这里写图片描述

可以看出，此时不用刷新整个页面就可以实现与后台进行交互，这大大增强了用户的页面体验。
Ajax的使用包括了四步：

1、得到XMLHttpRequest对象，注意如果要兼容IE6则使用我注释的代码
2、使用XMLHttpRequest对象的open方法，注意参数问题
3、Ajax的回调函数，服务器响应后，得到数据的处理
4、发送请求send方法。

我们知道，从后台传过来数据的方式有两种：json数据类型，xml类型。
下面我们演示一下怎样处理用后台传过来的json类型。
<!DOCTYPE html>
<html>
  <head>
    <title>index03.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script>
       function getData(node){
          var id = node.value;
          var xhr=new XMLHttpRequest();

          xhr.open("POST","personJson.do?did="+id,true);

          xhr.onreadystatechange=function(){
              if(xhr.readyState==4 && xhr.status==200){
                 var s=xhr.responseText;
                 //console.log(typeof json);//string
                 var json=eval(s);
                 //console.log(json);//[object,object,object,object];
                 var str="";
                 str +="<table border='1' cellspacing=0>";
                 for(var i=0;i<json.length;i++){
                     //console.log(json[i]);//Object {id: 21, name: "孙悟空", age: 132}, Object {id: 22, name: "猪八戒", age: 133},Object {id: 23, name: "沙和尚", age: 134},Object {id: 24, name: "唐和尚", age: 135}
                     str +="<tr>";
                     var p=json[i];
                     //console.log(p);//Object {id: 21, name: "孙悟空", age: 132}, Object {id: 22, name: "猪八戒", age: 133},Object {id: 23, name: "沙和尚", age: 134},Object {id: 24, name: "唐和尚", age: 135}
                     for(var j in p){
                         //console.log(p[j]);
                         str +="<td style='padding:5px'>"+p[j]+"</td>";
                     }

                     str +="</tr>";
                 }
                 str +="</table>";
                 document.getElementById("content").innerHTML=str;
              }
          };
          xhr.send();
       }
    </script>
  </head>

  <body>
    <p>i am a page.</p>

    <select onchange="getData(this);">
       <option value="1">凡人组</option>
       <option value="2">明星组</option>
       <option value="3">神仙组</option>
    </select>
    <br>
    <div id="content"></div>
  </body>
</html>
代码运行结果如下：

这里写图片描述

上面我们学习了javascript使用ajax接收json格式数据的方法，下面我们来学习一下javascript使用ajax接收xml格式数据的方法.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    window.onload = init;
    function init() {
        //1、获取部门节点
        var dn = document.getElementById("dep");
        //2、为该节点创建onchange
        dn.onchange = getPerson
        //3、创建一个getPerson的方法来处理事件 
    }

    function getPerson() {
        var did = this.value;
        //1、获取XMLHttpRequest;
        var xhr = new XMLHttpRequest();
        //2、通过xhr来打开页面，使用POST
        xhr.open("POST", "person.do", true);
        xhr.onreadystatechange = function() {
            //3、处理请求
            if (xhr.readyState == 4 && xhr.status == 200) {
                //3.1、获取xml节点
                var xmlDoc = xhr.responseXML;
                //3.2、获取所有的person节点
                var pns = xmlDoc.getElementsByTagName("person");
                //3.3、遍历所以节点，获取id，name等信息
                var node = "";
                for (var i = 0; i < pns.length; i++) {
                    node += getValueByProp(pns[i], "id") + "----------"
                            + getValueByProp(pns[i], "name") + "----------"
                            + getValueByProp(pns[i], "age") + "<br/>"
                }
                //3.4、写入到persons
                document.getElementById("persons").innerHTML = node;
            }
        }
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("did=" + did);
        //4、发送信息,需要传入did
    }
    //根据节点获取值
    function getValueByProp(node, prop) {
        return (node.getElementsByTagName(prop))[0].firstChild.nodeValue;
    }
</script>
</head>
<body>
    <select id="dep">
        <option value="1">普通组</option>
        <option value="2">明星组</option>
        <option value="3">西游组</option>
    </select>
    <div id="persons"></div>
</body>
</html>
运行结果如下：

这里写图片描述

既然js有使用ajax的式，jquery肯定也有啊，下面我们就来介绍下jquery使用ajax的方法。

1.首先演示jquery.load()方法。
语法：
  $(selector).load(URL,data,callback);
参数解析：
必需的 URL： 参数规定您希望加载的 URL。
可选的 data ：参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback： 参数是 load() 方法完成后所执行的函数名称。
代码演示如下：
//1.jquery.load()：加载页面片段（从服务器端加载数据）
//jquery_load.html
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
        <script type="text/javascript">

            //通过路径加载一个静态页面
            $(function(){
                $("#content").load("a.html");//此时页面加载了a.html页面的内容

            });

        </script>
    </head>

    <body>
        <div id="content">1111</div>
    </body>

</html>
//a.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</h1>
    </body>
</html>
运行结果如下显示：

这里写图片描述

2.jquery.get();方法
语法：
 $.get(URL,callback);
参数：
 必需的 URL 参数规定您希望请求的 URL。
 可选的 callback 参数是请求成功后所执行的函数名。
代码演示如下：
<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#dep").on("change", getPerson);
            });

            function getPerson() {
                var did = this.value;
                //get方法默认向服务器传值的方式是（拼接在uri后面）："personJson.do?username=liyanan&password=1234"(?：说明我要向服务器传递参数，&参数间分离)
                $.get("personJson.do",{"did" : did}, 
                    function(data) {
                        var ps = eval(data);
                        var node = "";
                        for(var i = 0; i < ps.length; i++) {
                            node += ps[i].id + "--------" + ps[i].name + "--------" +
                                ps[i].age + "<br/>";
                        }
                        document.getElementById("persons").innerHTML = node;
                    }
                );
            }
        </script>
    </head>

    <body>
        <select id="dep">
            <option value="1">普通组</option>
            <option value="2">明星组</option>
            <option value="3">西游组</option>
        </select>
        <div id="persons"></div>
    </body>

</html>
3.jquery.post();与上面get()方法类似，
代码演示如下：
<!DOCTYPE html>
<html>
  <head>
    <title>jqueryAjax.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>

    <script>
       $(function(){
           console.log($(".content"));
       });

       /*function getData(node){
          //console.log(node);//node指向整个select
          //var id=node.value;//1,2,3
            var str = "";
                for (var i = 0; i < data.length; i++) {
                    var p = data[i];
                    str += p.id+"-----------"+p.name+"-----------"+p.age+"<br>";
                }
                content.innerHTML = str;
            },"json");
       }*/



        function getData(node) {
            //console.log($("select").serialize());
            var id = node.value;
            //$("select").serializeArray();serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
            //$("select").serialize() 方法通过序列化表单值创建 URL 编码文本字符串.您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
            $.post("personJson.do",$("select").serializeArray(),function(data){
            //console.log(data);
                //var data = eval(data);
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    var p = data[i];
                    str += p.id+"-----------"+p.name+"-----------"+p.age+"<br>";
                }
                content.innerHTML = str;
            },"json");

        }
    </script>

  </head>
  <body>
    <select onchange="getData(this)" name="did">
        <option value="1">凡人组</option>
        <option value="2">明星组</option>
        <option value="3">神仙组</option>
    </select>
    <div id="content"></div>

  </body>
</html>
花帜
关注
专栏目录
AJAX 异步的 JavaScript 和 XML
weixin_44560792的博客
05-03 380
AJAX 异步的 JavaScript 和 XML 作者：欧日鑫 撰写时间：2020年4月30日 什么是 ajax 1.ajax（阿贾克斯 Asynchronous JavaScirpt And Xml）异步JavaScirpt 和 XML，是指一种创建交互式网页应用的网页开发技术，可以访问服务器数据的局部刷新的技术。 2.ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的...
【Ajax】---异步的JavaScript和XML
qq_53061847的博客
05-28 8769
介绍 Ajax 的核心是 XMLHttpRequest 对象。 方法 描述 new XMLHttpRequest() 创建新的 XMLHttpRequest 对象 abort() 取消当前请求 getAllResponseHeaders() 返回头部信息 getResponseHeader() 返回特定的头部信息 open(method,url,async,user,psw) 规定请求 method：请求类型 GET 或...
JS AJAX
小莓的博客
09-29 195
一、简介 1.功能： 不刷新页面更新网页 在页面加载后从服务器请求数据 在页面加载后从服务器接收数据 在后台向服务器发送数据 2.AJAX 仅仅组合了： 浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据） JavaScript 和 HTML DOM（显示或使用数据） 3.工作原理： 网页中发生一个事件（页面加载、按钮点击） 由 JavaScript 创建 XMLHttpRequest 对象 XMLHttpRequest 对象向 web 服务器发送请求 .
ajax 异步的javascript和xml
csdn_zsdf的博客
03-14 869
XMLHttpRequest和web服务器进行数据的一步交换。运用javascri操作DOM（文档对象模型）来实现动态局部刷新页面。var request ; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); }else{ request = new ActiveXObject(“Mircrosoft.X
Ajax（异步 JavaScript 和 XML）
Carohuan的博客
11-26 1775
Ajax = 异步JavaScript 和XML （标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重
Ajax（异步的JavaScript和XML）
weixin_62111285的博客
10-13 153
Asynchronous（异步的）、Synchronous（同步的）。 AJAX（Asynchronous JavaScript and XML）异步的JavaScript和XML。 AJAX是一种无需重新加载整个网页的情况下，能够更新部分网页的的技术；比如在搜索框输入内容，后台可以返回推荐列表，实现局部请求，不同于以往重新加载整个浏览器。它就是一种创建更好更快以及交互性更强的Web应用程序技术。 实现客户端与服务端的异步通信。 AJAX的应用场景：搜索框的推荐列表、用户登录时检验用户是否存在、登录时
外文翻译--异步JAVASCRIPT技术和XML （ AJAX ）与JAVA平台.doc
06-11
异步JavaScript和XML（AJAX）技术是一种用于构建高度交互式和动态Web应用程序的方法。它利用JavaScript语言与服务器进行异步通信，通过XML格式的数据交换来更新页面的部分内容，无需刷新整个页面。这一技术的兴起，...
jQuery-ajax-用户名异步请求
10-21
Ajax，即Asynchronous JavaScript and XML，允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，提供更流畅的用户体验。 在“jQuery-ajax-用户名异步请求”这个场景中，我们可能是在设计一个...
ajax-register.zip_ajax 注册_jsp注册异步
09-24
在IT行业中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于网页应用开发，以实现页面的无刷新更新。本项目“ajax-register.zip”是基于Ajax、JSP（JavaServer Pages）和Servlet技术实现的一个用户注册...
AJAX （异步的JavaScript 和 XML）
最新发布
/*多学习 不油腻*/
04-17 1715
主要内容：1.AJAX用于异步交互、网页动态加载与局部更新。2.实现注册时用户名校验并提示的功能.3.使用jQeury实现AJAX（jQuery对AJAX技术进行了封装和简化）。
Web---Ajax（异步的JavaScript和Xml）
whale blog
10-01 388
学习前不妨看一下隐藏帧技术，Ajax原理其实就是采用隐藏帧技术隐藏帧技术入门 AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览...
异步的 JavaScript 和 XML--AJAX
qq_41954201的博客
07-10 217
Ajax1.应用场景2.优点3.请求方式 AJAX全称：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） 1.应用场景 发送请求->等待->响应->等待 期间不能和服务器发生其他的交互操作 只能运用在浏览器上：浏览器上内置了一个对象XmlHttpRequest帮你向服务器发送请求，服务器会返回一个xml或者文本数据给浏览器，做一些效果的展示或者其他页面的操作，从而达到一个页面没有刷新，但请求已经执行了的效果，异步刷新。 //获取
异步的JavaScript和XML_Ajax
qq_45370568的博客
04-13 292
Ajax在JS和JQuery中的实现 一、基本概念，同步异步 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端...
Ajax（异步JavaScript和XML）
shhghvvh的博客
12-15 310
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
【AJAX ：异步的 JavaScript 和 XML】
Jade_Heng_Star的博客
10-16 279
【AJAX ：异步的 JavaScript 和 XML】
【Java Web】异步的 JavaScript 和 XML（AJAX）
Ving_SuiXin的博客
05-05 579
AJAX的全称为Asynchronous JavaScript and XML，意思是异步的JavaScript和XML，它是一种可以在不重新加载整个页面的情况下与服务器进行数据交互并局部更新页面内容的方法而并非是一门新的语言。 AJAX的使用与平台以及浏览器无关，也不需要任何插件，只需浏览器支持JavaScript便可。 工作原理 AJAX的工作原理很简单，通过XmlHttpRequest...
AJAX-异步的 JavaScript 和 XML
weixin_53748496的博客
10-30 212
AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
AJAX（异步的 JavaScript 和 XML）
瓜冬瓜的博客
07-16 370
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax技术详解：异步JavaScript和XML的高效网页更新
AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个网页的情况下，能够更新部分网页内容的技术。它通过JavaScript异步发送请求，与服务器进行数据交换，然后更新DOM（文档对象模型）以实现页面动态更新。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值