1). 传统的JavaScript方法实现Ajax功能

var objXmlHttp = null; //声明一个空的XMLHTTP变量
        function CreateXMLHTTP() {
            //根据浏览器的不同,返回该变量的实体对象
            if (window.ActiveXObject) {
                objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                if (window.XMLHttpRequest) {
                    objXmlHttp = new XMLHttpRequest();
                }
                else {
                    alert("初始化XMLHTTP错误!");
                }
            }
        }
        function GetSendData() {
            document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中...' src='Images/Loading.gif' />"; //初始化内容
            var strSendUrl = "6-1b.html?date=" + Date(); //设置发送地址变量并赋初始值
            CreateXMLHTTP(); //实例化XMLHttpRequest对象
            objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest
            objXmlHttp.onreadystatechange = function() { //回调事件函数
                if (objXmlHttp.readyState == 4) { //如果请求完成加载
                    if (objXmlHttp.status == 200) { //如果响应已成功
                        //显示获取的数据
                        document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
                    }
                }
            }
            objXmlHttp.send(null); //send发送设置的请求 
        }

6-1b.html:

<div class="clsShow">姓名:陶国荣<br />性别:男<br />邮箱:tao_guo1_rong@163.com</div>

2). load()方法实现Ajax功能

$(function() {
            $("#Button1").click(function() { //按钮点击事件
                $("#divTip").load("6-1b.html"); //load()方法加载数据
            })
        })

3). getJSON函数获取数据

$(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件,并通过回调函数处理获取的数据
                $.getJSON("UserInfo.json", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                        strHTML += "姓名:" + Info["name"] + "<br>";
                        strHTML += "性别:" + Info["sex"] + "<br>";
                        strHTML += "邮箱:" + Info["email"] + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })

4). getScript函数获取数据

$(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开已获取返回数据的文件
                $.getScript("UserInfo.js");
            })
        })

UserInfo.js:

var data = [
  {
      "name": "陶国荣",
      "sex": "男",
      "email": "tao_guo_rong@163.com"
  },
  {
      "name": "李建洲",
      "sex": "女",
      "email": "xiaoli@163.com"
  }
];
 
var strHTML = ""; //初始化保存内容变量
$.each(data, function() { //遍历获取的数据
    strHTML += "姓名:" + this["name"] + "<br>";
    strHTML += "性别:" + this["sex"] + "<br>";
    strHTML += "邮箱:" + this["email"] + "<hr>";
})
$("#divTip").html(strHTML); //显示处理后的数据

5). get实现异步获取xml文档数据

$(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件,并通过回调函数处理获取的数据
                $.get("UserInfo.xml", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $(data).find("User").each(function() { //遍历获取的数据
                        var $strUser = $(this);
                        strHTML += "姓名:" + $strUser.find("name").text() + "<br>";
                        strHTML += "性别:" + $strUser.find("sex").text() + "<br>";
                        strHTML += "邮箱:" + $strUser.find("email").text() + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })

UserInfo.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User id="1">
    <name>陶国荣</name>
    <sex>男</sex>
    <email>tao_guo_rong@163.com</email>
  </User>
 
  <User id="2">
    <name>李建洲</name>
    <sex>女</sex>
    <email>xiaoli@163.com</email>
  </User>
</Info>

转载于:https://www.cnblogs.com/RobotTech/archive/2011/07/07/2100133.html

JQuery学习笔记 [Ajax] (6-1)相关推荐

  1. JQuery学习笔记 [Ajax] (6-2)

    1). $.get发送请求 $(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件,并通过回调函数返回服务器 ...

  2. jQuery学习笔记:Ajax(二)

    接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...

  3. javaweb(03) jQuery学习笔记

    javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...

  4. jQuery学习笔记开篇

    开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...

  5. jquery学习笔记及常用函数封装

    二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...

  6. jQuery学习笔记--目录

    jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

  7. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  8. 【转载】jQuery学习笔记

    jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...

  9. jQuery学习笔记02:核心部分

    jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...

最新文章

  1. mysql 乐观锁 脏读_mysql 丢失更新1和2、脏读、不可重复读和幻读 事务隔离级别 悲观锁 乐观锁...
  2. SAP Spartacus B2B 页面 Disable Confirmation 对话框的显示原理
  3. 一个函数统一238个机器学习R包,这也太赞了吧
  4. python邮箱配置_python flask mail QQ邮箱配置
  5. Python使用property函数和使用@property装饰器定义属性访问方法的异同点分析
  6. 细品慢酌QuickTest关键视图(1)
  7. 理解position与anchorPoint[转]
  8. property属性
  9. 10个比较有用的jQuery插件
  10. Batch Normalization论文翻译——中英文对照
  11. 修改微信小程序单选,复选框样式
  12. 什么是预付卡及预付卡发展前景
  13. 使用web设计器制作图表报表
  14. 如何培养自己的赚钱能力
  15. 【JAVA】8.继承(图形面积问题)
  16. 51单片机:数码管动态显示
  17. android openCV检测图像的基本特征,包括Canny边缘检测、Harris角点检测、霍夫直线检测-基于Android studio
  18. 有12个小球,外形相同,其中一个小球的质量与其他11个不同
  19. Linux第五次学习笔记
  20. WPF MDI窗体的实现方法

热门文章

  1. git 删除分之以及删除文件夹
  2. netty 5.0 源码分析(1)-----ButeBuf
  3. Python 大数据思维导图
  4. 系统架构师-基础到企业应用架构-业务逻辑层
  5. 程序员面试金典——5.2二进制小数
  6. Rust创建项目的两种方式
  7. 关于K-SVD算法中逐列更新的目标函数的理解,再看不懂就打死我吧
  8. Ubuntu操作U盘相关
  9. H5的段落标签、图片标签、列表标签与链接标签
  10. 2.熟悉LINUX的基本操作