文档章节

AJAX入门

我爱祥子
 我爱祥子
发布于 2015/03/29 21:40
字数 367
阅读 28
收藏 1

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
博文 57
码字总数 27333
作品 0
北碚
高级程序员
.Asp.Net 2.0 学习历程 菜鸟到中级程序员的飞跃

如果你是一个菜鸟或者自认为初学者那么本文非常适合你; 不能说这30本书就是最佳组合,但是可以说这个组合不差; 本人曾博览群书,很多书重复,很多书讲的不适用,这些书都是目前书店可以买到...

布雷泽
2011/03/13
0
0
asp.net2.0学习历程 菜鸟到中级程序员的飞跃【月儿原创】

asp.net2.0学习历程 菜鸟到中级程序员的飞跃 --30本好书点评 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.5.16 学历历程 如果你是一个菜鸟或者自认为初学者那么本文非常...

晨曦之光
2012/03/09
127
0
新世代网站开发技术ASP .NET AJAX——章立民北京研讨会邀请函

目前,在网站开发技术的快速演进中,AJAX 已被广泛地视为推动新一代网站的核心技术。通过它可以带来前所未有的网站使用感受——包括高效能、高交互性与可定制化。而 Microsoft ASP.NET AJAX...

章立民
2007/06/22
0
0
jquery-datatables

datatables在线文档(英文) http://datatables.net/docs/DataTables/1.9.0/DataTable.html 比较适合入门的示例 http://blog.csdn.net/mickeymiki/article/details/8240477 属性的说明 http:/......

深蓝苹果
2014/06/03
0
0
Web开发系列 - JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子...

长征2号
2017/01/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《Netkiller Java 手札》· 二进制文件操作大全

本文节选自《Netkiller Java 手札》 Netkiller Java 手札 Mr. Neo Chan, 陈景峯(BG7NYT) 中国广东省深圳市望海路半岛城邦三期 518067 +86 13113668890 <netkiller@msn.com> $Id: book.xml 6......

netkiller-
25分钟前
1
0
Fiddler Debugger post请求

常用的两种: 第一种默认的 对应URL为www 的要用请求头为:Content-Type: application/x-www-form-urlencoded 请求参数为 :param1=1234¶m2=12345 注:有些接口是指定用这种的第二方式并不...

轻量级赤影
32分钟前
2
0
如何搭建母婴亲子类知识社区

近期社交领域融资动作频繁,海尔高管、海尔医疗有限公司总裁管礼庆创办的母婴知识分享社区平台Alwayslove于上月获得700万天使轮融资。 Alwayslove是一个母婴知识分享社区平台,采用UGC模式,...

ThinkSNS账号
34分钟前
1
0
Android 自定义构建类型 BuildType

最近接触到自定义构建类型 BuildType,发现这一块有些地方稍不注意的话会被绕进去浪费点时间,既然我这边已经花费时间了,如果正好你也需要接触到 BuildType,也许接下来分享的 tips 可能会帮...

猴亮屏
36分钟前
1
0
美团点评基于 Flink 的实时数仓建设实践

引言 近些年,企业对数据服务实时化服务的需求日益增多。本文整理了常见实时数据组件的性能特点和适用场景,介绍了美团如何通过 Flink 引擎构建实时数据仓库,从而提供高效、稳健的实时数据服...

美团技术团队
39分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部