ajax学习笔记(一)

摘要:
ajax一词的实际含义是“无页面跳转、异步加载内容和重写页面内容”。说白了,就是让js读取服务器上的数据。例如,当您登录到网站时,您可以判断输入的密码是否正确,而无需刷新。这里是ajax技术的使用。ajax不仅使用XML数据,而且在许多情况下可以对json或纯文本进行操作。

ajax一词的实际含义为“不发生页面跳转、异步载入内容并改写页面内容的技术”,说白了就是让js去读取服务器上的数据,举个常见的例子,一般网站登录的时候不用刷新就可以判断你输入的密码是否正确,这里就用了ajax技术,ajax不仅仅会使用XML数据,很多时候也可以对json或者纯文本进行操作。


准备工作

  • 要进行ajax练习,首先得配置自己的服务器,可以直接下个PHPstudy或者wamp
  • 本次练习读取服务器上的静态TXT文件,这里涉及到一个问题就是txt的字符集编码必须跟网页上的一致,不然读取出来的数据就会乱码,常见的字符集编码有utf-8、gb2312
  • 把软件根目录里面的www文件夹的内容清空放上两个文件index.html和data.txt,我们要做的就是在index.html里面用ajax读取data.txt里面的数据
  • 在浏览器地址栏中输入localhost就能访问到index.html了

编写ajax

  • 创建XMLHttpRequest对象var xhr=new XMLHTTPRequest;

js动态向服务器发送请求,需要使用XMLHTTPRequest对象,在IE中通过ActiveX插件实现,可能会遇到3中不同版本的XHR对象,具体兼容看程序

  • 连接到服务器xhr.open(方法,文件名,异步传输);

常用两种方法get、post
get:通过URL传送数据,常用于向服务器读取信息,容量小,有缓存
post:通过http content传送数据,常用于向服务器上传信息,容量大,无缓存
浏览器缓存机制:只要URL不变,浏览器就会读取缓存的内容,无法做到实时更新
解决方法:动态改变URL,本例中采取的方法:
Ajax('data.txt?t='+new Data().getTime(),fnSucc,fnFail)

  • 发送请求xhr.send();
  • 接收返回值

首先通过xhr.readyState判断是否完成了对服务器响应的接受
然后通过xhr.status判断响应的状态
如果通讯正常结束,就可以通过xhr.responseText读取通讯的内容,但是格式为字符串,可以使用eval()转换格式


调用代码

我们要做的就是在index.html里面用封装好的Ajax函数读取data.txt里面的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax练习</title>
    <script src="http://t.zoukankan.com/ajax.js"></script>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            oBtn.onclick=function(){
                Ajax('data.txt?t='+new Date().getTime(),function(str){
                    alert('读取成功,内容为: '+str);
                    },function(str){
                    alert('读取失败,原因为: '+str);
                });
            };
        }
    </script>
</head>
<body>
    <input   type="button" value="读取数据">
</body>
</html>

封装的Ajax函数代码

/**************************************
* Ajax(url,fnSucc,fnFail)
* url:请求的文件地址
* fnSucc:成功时执行的函数,传入读取到的文件的内容
* fnFail:可选,失败时返回的函数,返回出错的状态码
**************************************/
function Ajax(url,fnSucc,fnFail){
    //创建ajax对象
    //ie6
    if(!window.XMLHttpRequest){
        XMLHttpRequest=function(){
            var objs=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
            for( var i=0;i<objs.length;i++){
                var obj=objs[i];
                try{
                    return new ActiveXObject(obj);
                }catch(ignore){
                    //跳过
                }
            }
            throw new Error('Cannot create XMLHttpRequest object.');
        }
    }
    var oAjax=new XMLHttpRequest;

    //链接服务器
    //open(方法,文件名,异步传输)
    oAjax.open('GET',url,true);

    //发送请求
    oAjax.send();

    //接收返回
    oAjax.onreadystatechange=function(){
        //oAjax.readerState浏览器和服务器进行到哪一步了
        if(oAjax.readyState==4)//读取完成
        {
            if(oAjax.status==200)//成功
            {
                fnSucc(oAjax.responseText);
            }else{
                if(fnFail){
                    fnFail(oAjax.status);
                }
            }
        }
    }
}

免责声明:文章转载自《ajax学习笔记(一)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇快速熟悉正则表达式谈谈美国的程序员下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Ajax 与 XmlHttpRequest

AJAX描述了确保Web应用在Web服务器请求新数据的情况下也能(几乎)实时反应的一种方法。具体地说,AJAX只是一些建立已久的技术的相互作用,从HTML、XHTML和HTTP,到JavaScript、CSS甚至XML或者JSON。异步请求附加数据集成到网页的技术理论上在1998年左右就已经出现,只有2005年出现的AJAX这一术语以及流行词Web 2.0相...

vue开发环境和生产环境的跨域

前端在生产环境跨域 一,开发环境跨域 1.配置代理 如果使用vue-cli搭建的项目,可以直接使用proxyTable模块,项目框架已经集成在config -> index.js 页面配置proxyTable,如下: proxyTable: { '/api':{ //开发坏境下:target 里的地址是你跨域请求的...

让您的Ajax应用加载数据时界面友好 (转贴)

转自:http://www.cnblogs.com/birdshome/archive/2006/05/25/AjaxIndicators.htmlAjax火啊,火到了居然Loading Icons都有很多人专门提供的地步。下面是我同事给我介绍的一些提供Ajax Activity Indicators的网站,共享给大家,以便让我们的Ajax应用具有更好的用户...

说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneG...

jquery

1.加载DOM使用任何框架时,通常都会与文档对象(DOM)交互。但是为了这种交互,必须首先确定整个DOM已经加载。(1)在javascript编程中,通常在采取行动之前等待窗口加载:window.onload=function(){// Do whatever here.}或使用匿名函数:(function(){// Do whatever here.})(...

调查问卷Html5发展综述

【Html5可以离线操作、是否能开发Html5离线网络应用程序】 按常理Html5开发出来的是Web网页应用。则需网络连接才干下载并使用,作为Html5对离线应用开发的支持最大的特殊,支持离线须要满足例如以下条件: 离线资源缓存:须要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才干在在线状态时,把这些文件缓存到本地。此后,当用户...