Ajax在jQuery中应用--jQuery基础知识点(5)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://ligang.blog.csdn.net/article/details/41631503

Ajax(Asynchronous JavaScript and XML),其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。Ajax技术并不局限于Web动态页面,在普通的静态HTML页面中同样可以实现!

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 = "b.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发送设置的请求 
    }

2. load(url,[data],[callback])方法实现Ajax功能 load()方法可以很快地加载数据到页面中,但如需对获取的数据进行处理,必须在先插入页面中,然后才能进行,执行效率较低。 例:$("#divTip").load("b.html"); //load()方法加载数据 3. getJSON(url,[data],[callback])函数获取数据 采用将要获取的数据集另存为一种轻量级的数据交换格式,即JSON文件格式

<span style="white-space:pre"></span>$.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(url,[data],[callback])函数获取JS文件内容

<script type="text/javascript" src="js/*.js"><scirpt> //传统方式 $("<script type="text/javascript" src="js/*.js" />").appendTo("head"); //传统方式 例:$.getScript("UserInfo.js");//打开已获取返回数据的文件

5. get(url,[data],[callback],[type])实现异步获取xml文档数据

[type]:表示返回数据的格式,如HTML、XML、JS、JSON、TEXT等

$.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); //显示处理后的数据
})

6. $.get发送请求

$.get("UserInfo.aspx",{ name: encodeURI($("#txtName").val()) },function(data) {
    $("#divTip").empty() //先清空标记中的内容
    <span style="white-space:pre">		</span>.html(data); //显示服务器返回的数据
})

7. $.post发送请求

$.post("User_Info.aspx",{ name: encodeURI($("#txtName").val()),
     <span style="white-space:pre">			</span>  sex: encodeURI($("#selSex").val()) },function(data) {
    $("#divTip").empty() //先清空标记中的内容
   <span style="white-space:pre">		</span>.html(data); //显示服务器返回的数据
})

8. GET方式不适合传递数据量较大的数据 GET方式请求的历史信息会在浏览器的缓存中,有一定的安全风险 9. serialize()序列化表单,简化参数传值的方式 将所有选择的DOM元素转换成能随Ajax传递的字符串,即序列化所选择的DOM元素! 例:$("#frmUserInfo").serialize(), //序列化表单数据 不足:如表单中有多选项被选中时,该方法只能传递一项的值 10. $.ajax([options])方法发送请求,$.ajax() 是最低层方法,功能最强大

$(function() {
<span style="white-space:pre">	</span>$.ajax({ //请求登录页
	    url: "login.html", //登录静态页
	    dataType: "html",
	    success: function(HTML) { //返回页面内容
	        $("#frmUserLogin").html(HTML); //将页面内容置入表单
	        $("#btnLogin").click(function() { //“登录”按钮单击事件
	            //获取用户名称
	            var strTxtName = encodeURI($("#txtName").val());
	            //获取输入密码
	            var strTxtPass = encodeURI($("#txtPass").val());
	            //开始发送数据
	            $.ajax({ //请求登录处理页
	                url: "login.aspx", //登录处理页
	                dataType: "html",
	                //传送请求数据
	                data: { txtName: strTxtName, txtPass: strTxtPass },
	                success: function(strValue) { //登录成功后返回的数据
	                    //根据返回值进行状态显示
	                    if (strValue == "True") {
	                        $(".clsShow").html("操作提示,登录成功!");
	                    }
	                    else {
	                        $("#divError").show().html("用户名或密码错误!");
	                    }
	                }
	            })
	        })
	    }
	})
})   

11. $.ajaxSetup([options])方法全局设置Ajax,一次设置,全局有效

$.ajaxSetup({ //设置全局性的Ajax选项
    type: "GET",
    url: "UserInfo.xml",
    dataType: "xml"
})
 $("#Button1").click(function() { //"姓名”按钮的单击事件
    $.ajax({
        success: function(data) { //传回请求响应的数据
            ShowData(data, "姓名", "name"); //显示"姓名"部分
        }
    })
})
$("#Button2").click(function() { //"性别”按钮的单击事件
    $.ajax({
        success: function(data) { //传回请求响应的数据
            ShowData(data, "性别", "sex"); //显示"性别"部分
        }
    })
})

12. Ajax中的全局事件 ajaxStart和ajaxStop这两个全局事件的使用频率非常高。前者是当请求开始执行时触发,往往用于编写一些准备性的工作,如提示“正在获取数据...”字样;后者是当请求结束时触发,在这一事件中,常常与前者配合,说明请求的最后进展状态,如将显示中的“正在获取数据...”字样修改为“成功获取数据...”字样,然后渐渐消失。

//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function() {
    $(this).show(); //显示元素
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function() {
    $(this).html("已成功获取数据。").hide();
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券