用创建XMLHttpRequest对象与jQuery框架对文本为HTTP、JSON、XML的ajax实现比较

最新推荐文章于 2024-09-07 08:32:35 发布
最新推荐文章于 2024-09-07 08:32:35 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： ajax jQuery 文章标签： ajax jQuery 数据解释 xml json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongwen7710/article/details/19352567
版权

Ajax与JQuery框架学习blog知识点总结

用创建XMLHttpRequest对象与jQuery框架对文本为HTTP、JSON、XML的ajax实现比较

一、Ajax简介：

AJAX =Asynchronous JavaScript and XML（异步的JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

Ajax工作原理图：


二、Ajax学习参考网址

         W3School:  http://www.w3school.com.cn/ajax/

         Ajax中国： http://www.okajax.com/

         维基百科： http://zh.wikipedia.org/zh-cn/AJAX

         jQueryAPI： http://api.jquery.com/jQuery.ajax/

         Ajax教程： http://wenku.it168.com/redian/ajax/

 

三、案例描述

        

 A、创建XMLHttpRequest对象，链接的文本为HTTP的形式实现

         B、创建XMLHttpRequest对象，链接的文本为XML的形式实现

        C、创建XMLHttpRequest对象，链接的文本为JSON的形式实现

D、链接的文本为HTTP、XML、JSON用jQuery框架实现(重点)

注解：为了便于理解代码，快速学习jQuery框架，本文将用创建XMLHttpRequest对象与用jQuery框架实现ajax功能放在一起，便于比较学习。

 

四、代码实现及相关代码的含义解析



注解：如果要用jQuery框架实现还要在上文本代码中的<head></head>中添加如下脚本代码，即引入jQuery框架脚本，

<script type="text/javascript"src="../scripts/jquery-1.7.2.js"></script>

并在工程中的WebRoot创建scripts文件夹，并将jquery-1.7.2.js文件拷贝到其中

 

第一部分：数据格式为HTTP进行解析

用创建XMLHttpRequest对象，来实现HTTP文本解析

<scripttype="text/javascript">
         window.οnlοad=function(){
              var aNodes= document.getElementsByTagName("a");
              for(var i=0; i < aNodes.length; i++){
                   aNodes[i].οnclick=function(){
                       var request=new XMLHttpRequest();
                       var method="GET";
                       var url=this.href;
                       request.open(method,url);
                       request.send(null);
                       request.onreadystatechange=function(){
                            if(request.readyState==4){
                                 if(request.status==200|| request.status==304){
                                     document.getElementById("details").innerHTML= request.responseText;
                                 }
                            }
                           
                       }
                       returnfalse;
                   }
              }   
         }
     </script>

用jQuery框架实现的HTTP文本解析

<scripttype="text/javascript"src="../scripts/jquery-1.7.2.js"></script>
    <scripttype="text/javascript">
        $(function(){
            $("a").click(function(){
                //注意下面的“h2 a”部分，很特别，很神奇
                var url=this.href+"h2 a";
                var args={"time":new Date()};
                //任何一个html节点都可以使用load方法加载Ajax,结果将直接插入html节点中
                $("#details").load(url,args);
                returnfalse;
            });
        });
    </script>

 

 

第二部分：数据格式为XML进行解析

用创建XMLHttpRequest对象，来实现XML文本解析

<scripttype="text/javascript">
         window.οnlοad=function(){
              var aNodes= document.getElementsByTagName("a");
              for(var i=0; i < aNodes.length; i++){
                   aNodes[i].οnclick=function(){
                       var request=new XMLHttpRequest();
                       var method="GET";
                       var url=this.href;
                       request.open(method,url);
                       request.send(null);
                       request.onreadystatechange=function(){
                            if(request.readyState==4){
                                 if(request.status==200|| request.status==304){
                                 //1，结果为XML格式，所以需要使用responseXML来获取
                                    var result= request.responseXML;
                                 //2,结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
                                 //目标格式为：
                                 /*
                       <h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
                       <a href="http://andybudd.com">http://andybudd.com</a>
                                     */  
              var name= result.getElementsByTagName("name")[0].firstChild.nodeValue;
              var website= result.getElementsByTagName("website")[0].firstChild.nodeValue;
              var email= result.getElementsByTagName("email")[0].firstChild.nodeValue;
                                    //alert(name);
                                    //alert(website);
                                    //alert(email);
                                    
                                    var aNode= document.createElement("a");
                                     aNode.appendChild(document.createTextNode(name));
                                     aNode.href="mailto:"+ email;
                                    
                                    var h2Node= document.createElement("h2");
                                     h2Node.appendChild(aNode);
                                    
                                    var aNode2= document.createElement("a");
                                     aNode2.appendChild(document.createTextNode(website));
                                     aNode2.href= website;
                                    var detailsNode= document.getElementById("details");
                                    //下面这句话的意思为，如果不加入“”，则加入的值为累计加入
                                     detailsNode.innerHTML="";
                                     detailsNode.appendChild(h2Node);
                                     detailsNode.appendChild(aNode2);
                                 }
                            }
                           
                       }
                       returnfalse;
                   }
              }
         }
     </script>

用jQuery框架实现的XML文本解析

<scripttype="text/javascript"src="scripts/jquery-1.7.2.js"></script>
    <scripttype="text/javascript">
        $(function(){
            $("a").click(function(){
                var url=this.href;
                var args={"time":new Date()};
                //url:
                //args: JSON格式
                //function: 回到函数：当响应结束时，回调函数被触发，响应结果在data中
                $.get(url, args,function(data){
                    var name= $(data).find("name").text();
                    var email= $(data).find("email").text();
                    var adress= $(data).find("adress").text();
                   
                    $("#details").empty()
                            .append("<h2><a href="+ email+">"+name+"</a></h2>")
                            .append("<a href='"+ website+"'>"+ website+ "</a>");
                });
                returnfalse;
            });
        });
    </script>

 

第三部分：数据格式为JSON进行解析

用创建XMLHttpRequest对象，来实现JSON文本解析

<scripttype="text/javascript">
        window.οnlοad=function(){
            var aNodes= document.getElementsByTagName("a");
            for(var i=0; i < aNodes.length; i++){
                aNodes[i].οnclick=function(){
                   
                    var request=new XMLHttpRequest();
                    var method="GET";
                    var url=this.href;
                   
                    request.open(method,url);
                    request.send(null);
                   
                    request.onreadystatechange=function(){
                        if(request.readyState==4){
                            if(request.status==200|| request.status==304){
                                //1，结果为XML格式，所以需要使用responseXML来获取
                                var result = request.responseText;
                                var object = eval("("+ result+")");
                                //2,结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
                                //目标格式为：
                                /*
                                    <h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
                                    <a href="http://andybudd.com">http://andybudd.com</a>
                                */ 
                                var name = object.person.name;
                                var website =  object.person.website;
                                var email =  object.person.email;
                               
                                //alert(name);
                                //alert(website);
                                //alert(email);
                               
                                var aNode = document.createElement("a");
                                aNode.appendChild(document.createTextNode(name));
                                aNode.href="mailto:"+ email;
                               
                                var h2Node = document.createElement("h2");
                                h2Node.appendChild(aNode);
                               
                                var aNode2 = document.createElement("a");
                                aNode2.appendChild(document.createTextNode(website));
                                aNode2.href= website;
                               
                                var detailsNode = document.getElementById("details");
                                //下面这句话的意思为，如果不加入“”，则加入的值为累计加入
                                detailsNode.innerHTML="";
                                detailsNode.appendChild(h2Node);
                                detailsNode.appendChild(aNode2);
                               
                            }
                        }
                       
                    }
                    returnfalse;
               
                }
            }
        }
    </script>

用jQuery框架实现的JSON文本解析

<scripttype="text/javascript"src="scripts/jquery-1.7.2.js"></script>
    <scripttype="text/javascript">
        $(function(){
            $("a").click(function(){
                var url=this.href;
                var args={"time":new Date()};
                //url:
                //args: JSON格式
                //function: 回到函数：当响应结束时，回调函数被触发，响应结果在data中
                $.getJSON(url, args,function(data){
                    var name= data.person.name;
                    var email= data.person.email;
                    var adress= data.person.adress;
                   
                    $("#details").empty()
                            .append("<h2><a href="+ email+">"+name+"</a></h2>")
                            .append("<a href='"+ website+"'>"+ website+ "</a>");
                });
                returnfalse;
            });
        });
    </script>

 

 

五、优缺点总结

优点：

XML是一种通用的数据格式，不必把数据强加到已定义好的格式中，而是要为定义合适的标记，利用DOM可以完成掌控文档。

JSON作为一种数据传输格式，JSON与XML很相似，但是它更加灵巧，JSON不需要从服务器端发送含有特定内容类型的首部信息。

 

缺点：

对于XML数据格式，如果文档来自服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的，当浏览器收到长的XML文件后，DOM解析可能会很复杂。

JSON语法过于严谨(很像python语言的元组的书法格式)，代码不易读，eval函数存在风险。

 

整体设计分析：

若应用程序不需要与其他应用程序共享数据的时候，使用HTML片段来返回数据时最简单，如果数据需要重用，JSON文件是个不错的选择，其在性能和文件大小方面有优势，当远程应用程序未知时，XML文档时首选，因为XML是Web服务领域的“世界语”。

 

zhongwen7710
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XMLHTTPRequest处理返回XML数据和jQuery处理返回XML数据比较
qq_43679366的博客
02-15 398
XMLHTTPRequest处理返回XML数据和jQuery处理返回XML数据比较
ajax与XMLHttpRequest对象
weixin_49757916的博客
06-28 256
ajax与XMLHttpRequest对象 1.什么是Ajax
jQuery ajax之XMLHttpRequest (一)
秦萍健的CSDN
03-09 4463
一.什么是ajax AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML)。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 XMLHttpRequest 是 AJAX 的基础, 而AJAX是对XMLHtt...
XMLHttpRequest、jquery、fetch、axios发送网络请求
LBY_XK的博客
05-18 269
XMLHttpRequest网络请求 created() { //vue的声明周期函数 // 发送网络请求 // 使用xhr对象 // 1.创建xhr对象 var xhr = new XMLHttpRequest(); // 2.装载请求(注意this指向，用箭头函数) xhr.onreadystatechange
Ajax
您已进入防沉迷系统...
11-05 762
一，AJAX的工作原理 Ajax的核心是一个JavaScript对象：XMLHttpRequest对象。该对象在IE5中首次引用，他是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 l  AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待
JQuery——Ajax之XMLHTTPRequest对象
ddm
10-23 1094
XMLHTTPRequest对象简介 1、XMLHttpRequest对象是整个Ajax开发的基础； 2、能够向服务器发送请求； 3、能够接收服务器返回的数据； 4、提供客户端和服务器异步通信的能力； 5、最早出现在IE，随着应用的广泛，渐渐推广到其他浏览器中。 XMLHttpRequest对象的创建 >不同的浏览器创建的方法不同; >所有现代浏览器均內建XMLHttp
jQuery高级编程之js对象、json与ajax用法实例分析
10-16
在jQuery的高级编程中，js对象、JSON与AJAX是三个关键概念，它们在Web开发中扮演着重要角色。下面将分别对这三个知识点进行详细解释。 **js对象**： JavaScript对象是JavaScript语言的核心特性，用于存储和组织数据...
通过XMLHttpRequest和jQuery实现ajax的几种方式
10-23
本文将详细介绍如何使用XMLHttpRequest和jQuery实现AJAX请求。 首先，我们来看一个简单的使用XMLHttpRequest实现AJAX的例子。在HTML中，我们有一个按钮，当用户点击时，会触发AJAX请求获取当前时间并显示在文本框中...
jQuery+JSON实现AJAX二级联动实例分析
10-23
文章以实例的方式展示了前端使用jQuery框架发送AJAX请求，并且在后端通过C#编写的WebHandler处理数据，将数据库中的信息以JSON格式返回给前端，前端再根据返回的JSON数据动态更新网页上的下拉列表，从而实现联动效果...
jquery的ajax和getJson跨域获取json数据的实现方法
10-26
本文主要介绍两种在使用jQuery进行跨域获取json数据时的实现方法，即通过jQuery的ajax和getJson方法配合JSONP（JSON with Padding）技术来实现跨域数据的获取。 首先，关于jQuery的ajax和getJson方法。ajax是...
jQuery AJAX XMLHttpRequest对象PPT
04-27
XMLHttpRequest对象是JavaScript中用于异步数据交换的核心组件，它是AJAX（Asynchronous JavaScript and XML）技术的基础。AJAX允许网页在不刷新整个页面的情况下，仅更新部分区域，从而提高用户体验。尽管名称中...
AJAX - 创建 XMLHttpRequest 对象
weixin_30640291的博客
09-22 63
XMLHttpRequest 是 AJAX 的基础。 XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 创建 XMLHttpRequest 对象...
前端发起网络请求的几种常见方式（XMLHttpRequest、FetchApi、jQueryAjax、Axios）
TANKING，开源开发者！
04-30 1350
这是最传统和最常见的方式之一。它允许客户端与服务器进行异步通信。XHR API提供了一个在后台发送HTTP请求和接收响应的机制，使得页面能够在不刷新的情况下更新部分内容。Fetch API是一种新的Web API，提供了一种更强大、更灵活的方式来发起网络请求。它使用Promise对象，简化了对网络请求的处理，并且提供了更友好的API。jQuery是一个流行的JavaScript库，其中包含了简化Ajax调用的方法。通过jQuery的Ajax方法，可以方便地发送各种类型的HTTP请求，并处理响应。Axios。
XML
weixin_44116098的博客
02-02 309
一、简介 1.xml定义 ​ ​xml是可扩展的标记性语言 2.xml作用 ​ ​①用来保存数据，且这些数据具有自我描述性 ​ ​②可以作为项目或模块的配置文件 ​ ​③可以作为网站传输数据的格式(现在JSON为主) 3.xml语法 ①文档声明 ②元素(标签) ③xml属性 ④xml注释： ⑤文本区域(CDATA区) <?xml version = "1.0" encoding = "utf-8" ?> 以上是xml文件的声明 ​ ​version = “1.0”：version表示xml的版
使用Ajax的三种方式
weixin_34268579的博客
12-22 123
Ajax原生XmlHttpRequest的使用 1. XmlHttpRequest对象的主要方法 1 a. void open(String method,String url,Boolen async) 2 用于创建请求 3 4 参数： 5 method： 请求方式（字符串类型），如：POST、GET、DELETE... 6 ...
jquery的ajax()之 beforeSend属性详解和XMLHttpRequest详解
qq_30908729的博客
08-21 4868
方法beforeSend，用于在向服务器发送请求前添加一些处理函数。这是一个ajax事件，在ajax请求开始之前就被触发，通常允许用户修改XMLHttpRequest对象（比如说设置附加的头部信息）。一般用在提交的数据比较大或者访问服务器的速度比较慢的时候，给可以一些提示，如"正在处理，请等待。。。" $.ajax({      type:"GET",      url:"a.php",
不使用XMLHttpRequest对象实现Ajax效果
webbc的博客
10-06 1693
前言： 我以前接触Ajax的时候，只是用Jquery的api来实现Ajax效果，对其并没有细细研究，最近在学习Ajax的原理，会不定时的发布关于Ajax的文章，希望大家关注！Ajax原理： 在页面不刷新的情况下，利用XMLHttpRequest发送HTTP请求。主题： 但是不依靠XMLHttpRequest对象，也是可以实现Ajax效果的，我们可以用Js实现对后台服务器的请求，同时不带来页面的
Ajax 解决回调竞争
最新发布
大黄鸭在发光的专栏
09-07 487
即多次快速点击同一按钮导致多个异步的AJAX请求同时返回，导致数据更新顺序混乱。这种情况在异步编程中很常见，特别是前端开发时，AJAX请求的回调并不保证按顺序执行。回调函数，这样每个 AJAX 请求在发送前和完成后都可以执行相应的逻辑。
原生JS与jQuery实现AJAX详解
"本文主要探讨了原生JavaScript和jQuery如何实现AJAX技术，这是一种无需刷新整个页面即可与服务器交换数据并更新网页内容的方法。通过AJAX，开发者可以使用JavaScript无跳转地提交数据，提高用户体验。文章分别介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值