jquery实现ajax功能和读取xml

来源：互联网发布：learnx mac 编辑：程序博客网时间：2024/05/20 20:48
1.传统的JavaScript方法实现Ajax功能
var objXmlHttp = null;//声明一个空的XMLHTTP变量
function CreateXMLHTTP(){//根据浏览器的不同，返回该变量的实体对象
 if(window.ActiveXObject){
   objXmlHttp= new ActiveObject("Microsoft.XMLHTTP");
 }else{
   if(window.XMLHttpRequest){
    objXmlHttp = new XMLHttpRequest();
   }
   else{
    alert("初始化XMLHTTP错误！")；
}
}
}
function GetSendData(){
  document.getElementById("divTip").innerHTML="<img alt='' titile='正在加载中...' src=“Images/Loading.gif”/>";//初始化内容
  var strSendUrl ="b.html?date="+Date();//设置发送地址变量并赋初始值
  createXMLHTTP();//实例化XMLHttpRequest对象
  objXmlHttp.open("GET",strSendUrl,true);//open方法初始化xmlrequest
  objXmlHttp.onreadyStatechange=function(){//回调事件函数
  if(objXmlHttp.readyState==4){//如果请求完成加载
  if(objXmlHttp.status==200){//如果响应已成功
  document,getElementById("DivTip").innerHTML = objXmlHttp.responseText;
    }
  }
}
objXmlHttp.send(null);//send 发送设置的请求
}
2.load（）方法实现Ajax功能
$(function(){
 $("#button1").click(function(){//按钮点击事件
   $("#divTip").load("b.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");
 })
})
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); //显示处理后的数据
                })
            })
6.$.get发送请求
   $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.get("UserInfo.aspx",
                { name: encodeURI($("#txtName").val()) },
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })
7.$.post发送请求
  $(function(){
    $("#button1").click(function(){//按钮单击事件
    $.post("User_Info.aspx",// 打开文件，并通过回调函数返回服务器响应后的数据
    {name:encodeURI($("#txtName").val()),
     sex;encodeURI($("#selSex").val())
},
  function(data){
   $("#divTip")
   .empty()// 先清空标记中的内容
   .html(data);// 显示服务器返回的数据
   })
 })
})
8.serialize()序列化表单
$(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.post("User-Info.aspx",
                $("#frmUserInfo").serialize(), //序列化表单数据
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })
9.$.ajax()方法发送请求
$(function() {
            $.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("用户名或密码错误！");
                                }
                            }
                        })
                    })
                }
            })
        })
10.$.ajaxSetup()方法全局设置Ajax
 $(function() {
            $.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"); //显示"性别"部分
                    }
                })
            })

            $("#Button3").click(function() { //"邮箱”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "邮箱", "email"); //显示"邮箱"部分
                    }
                })
            })
            /*
            *根据名称与值，获取请求响应数据中的某部分
            *@Param d为请求响应后的数据
            *@Param n为数据中文说明字符
            *@Param d为数据在响应数据中的元素名称
            */
            function ShowData(d, n, v) {
                $("#divTip").empty(); //先清空标记中的内容
                var strHTML = ""; //初始化保存内容变量
                $(d).find("User").each(function() { //遍历获取的数据
                    var $strUser = $(this);
                    strHTML += n + "：" + $strUser.find(v).text() + "<hr>";
                })
                $("#divTip").html(strHTML); //显示处理后的数据
            }
        })
    </script>
11.Ajax中的全局事件
   $(function(){
//元素绑定全局事件
   $("#divMsg").ajaxStart(function(){
     $(this).show();
})
   $(#divMsg).ajaxStop(function(){
     $(this).html("已成功获取数据。")hide();
})
//按钮单击事件
$("#Button1").click(function(){
 $.ajax(
   type:"GET",
   url:"GetData.aspx",
//获取加码后的数据并作为参数传给服务器
    data:{txtData:encodeURI($("txtData").val()))},
    dataType:"html",
    success:function(data){
      $("#divTip").html(decodeURI(data));
}
})
})
})
0 0