jQuery学习笔录10（jQuery和ajax）

最新推荐文章于 2021-08-05 22:46:40 发布

壁橱里的老王

最新推荐文章于 2021-08-05 22:46:40 发布

阅读量1k

点赞数

分类专栏： ASP.NET jQuery C# Web 文章标签： jquery ajax xmlhttprequest asynchronous javascript 服务器

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7645973

版权

Web 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

ASP.NET

10 篇文章 0 订阅

订阅专栏

Ajax ：Asynchronous JavaScript and XML 异步Javascript和xml

传统模式:数据提交是通过表单Form来实现，而数据获取是靠全网页刷新来重新获取整页内容。

Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据。

<button>按钮用来触发Ajax，id为“resText”的元素用来显示从服务器返回的HTML文本

一个小例子：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajax1.aspx.cs" Inherits="ajax_ajax1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">
    <input type="button" value="Ajax提交" οnclick="Ajax()" />
    <div id="resText"></div>
    </form>
</body>
</html>
    <script>
    //声明一个空对象用来装入XMLHttpRequest对象
    var xmlHttpReq=null;
    //定义一个函数，通过该函数来异步获取信息
    function Ajax(){
        //给XMLHttpRequest对象赋值
        if(window.ActiveXObject){  //IE5 IE6 是以ActiveXObject的方式
                                   //引入XMLHttpRequest对象的。
            xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
        }else if(window.XMLHttpRequest){//除IE5 IE6以外的浏览器
                                        //XMLHttpRequest是window的子对象
            xmlHttpReq=new XMLHttpRequest(); //实例化一个XMLHttpRequest对象                        
        }
        //实例化成功后，使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL 
        xmlHttpReq.open("GET","test.aspx",true)//调用open()方法并采用异步方式
        
        
        
        //因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器 当他的readyState值改变时调用。
        //当readyState值被改变时，会激发一个readyStateChange事件，可以使用onreadystatechange属性来注册该回调事件处理器。
        xmlHttpReq.onreadystatechange=RequestCallBack;//设置回调函数，类似委托，将函数名指针给他
        
         xmlHttpReq.send(null); //使用send()方法发送该请求。因为这个请求使用的是HTTP的GET方式，所以可以在不指定参数或参数为null情况下调用send()方法
        //请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。xmlHttpReq.send(string)用于post
       
       
    }
     function RequestCallBack(){
            //事件处理器首先检查readyState的值和HTTP状态
            if(xmlHttpReq.readyState==4){//请求完成加载
                if(xmlHttpReq.status==200){//响应已经成功
                alert(xmlHttpReq.responseText);
                    document.getElementById("resText").innerHTML=xmlHttpReq.responseText;  
                }
            }
        }
</script>

使用XMLHttpRequest对象，不必将Web页面的所有内容都发送到服务器，而是按需发送，使用js启动一个请求并处理相应的返回值，然后使用DOM方法更新页面中的数据。