AJAX入门
AJAX入门
我爱祥子 发表于3年前
AJAX入门
  • 发表于 3年前
  • 阅读 28
  • 收藏 1
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

Ajax笔记

1、 Ajax定义及其工作原理

Ajax 由 HTML、JavaScript 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。

 

2、 创建XMLHttpRequest对象

对于Ajax,最核心的一个对象是XMLHttpRequest,所有的Ajax操作都离不开对这个对象的操作

    xmlHttp = new XMLHttpRequest();
    xmlHttp =new ActiveXObject(‘Microsoft.XMLHTTP’);

 

3、 XMLHttpRequest对象相关方法

    XMLHttpRequest.open(传递方式,地址,是否异步请求)//打开请求
    XMLHttpRequest.onreadystatechange//准备就绪执行
    XMLHttpRequest.responseText//获取执行结果

4、一个简单的例子

index.php文件中

    <script src="ajax.js" type="text/javascript"></script>
    <a href="#" onclick="funAjax('lgx')" > show lgx </a>
    <a href="#" onclick="funAjax('zbj')" > show zbj </a>
    <div id="show"></div>

 

ajax.js 文件中
     var xmlHttp;
    function $_xmlHttp(){
        if(window.XMLHttpRequest){
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }else if(window.ActiveXObject){
            xmlHttp = new XMLHttpRequest();
        }
    }
    function funAjax(id){
        $_xmlHttp();
        xmlHttp.open("get","chuli.php?id="+id,true);
        xmlHttp.onreadystatechange = change;
        xmlHttp.send(null);
    }
    function change(){
        var changeResult = xmlHttp.responseText;
        document.getElementById('show').innerHTML = changeResult;
    }

chuli.php文件中

     <?php 
        $str = $_GET['id'];
        for($i = 0; $i <10; $i++)
        echo $str;
        exit;
    ?>

5、 比较标准的ajax框架

    var http_request = false;
    function createRequest(url) {
    //初始化对象并发出XMLHttpRequest请求
        http_request = false;
        if (window.XMLHttpRequest) { //Mozilla等其他浏览器
            http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType("text/xml");
         }
        } else if (window.ActiveXObject) { //IE浏览器
        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        try {
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            }
           }
        }
        if (!http_request) {
            alert("不能创建XMLHTTP实例!");
            return false;
        }
        http_request.onreadystatechange = alertContents; //指定响应方法
        http_request.open("GET", url, true); //发出HTTP请求
        http_request.send(null);
        }
        function alertContents() { //处理服务器返回的信息
        if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            alert(http_request.responseText);
        } else {
            alert('您请求的页面发现错误');
                }
            }
        }

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 2
博文 54
码字总数 27333
×
我爱祥子
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: