码迷,mamicode.com
首页 > Web开发 > 详细

Ajax入门

时间:2016-04-20 11:34:24      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

一、原生Ajax

二、jQuery Ajax

三、ASP.NET MVC Ajax

-------------------------------------------------------------------------

原生ajax

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <input type="button" value="Ajax提交" onclick="Ajax();" />
    <div id="resText"></div>

    <script>

        var xmlHttpReq = null;     //声明一个空对象,用来装入XMLHttpRequest对象,下面会通过不同的条件给出


        if (window.ActiveXObject) {      //处理浏览器兼容问题,不同的浏览器实例化 XMLHttpRequest 不一样,这是 IE 5 6 的情况下

            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

        } else if (window.XMLHttpRequest) {          //除了 IE 5  6 以外的情况

            xmlHttpReq = new XMLHttpRequest();

        }

        function Ajax() {

            xmlHttpReq.open("GET", "test.php", true); //调用open()方法并采用异步方式,还没正式发请求!send()方法才是正真的发出请求

            xmlHttpReq.onreadystatechange = RequestCallBack; //设置回调函数,就是客户端的请求发出后,服务器返回了,然后客户端要执行的函数,RequestCallBack 是函数名称

            xmlHttpReq.send(null);   //因为使用GET方法提交,所以可以使用null作为参数调用,null可以省略

        }

        function RequestCallBack() {    //一旦readyState 值改变,将会调用该函数

            if (xmlHttpReq.readyState == 4) {    //readyState为4的时候表示加载完成

                if (xmlHttpReq.status = 200) {   //响应成功为200

                    //将xmlHttpReq.responseText 的值赋给 id为resText 的元素
                    document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
                }
            }
        }

    </script>
</body>
</html>

 

  

Ajax入门

标签:

原文地址:http://www.cnblogs.com/wanghaibin/p/5411665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!