一、什么是Ajax?

2005 年Jesse James Garrett 发表了一篇文章,标题为:“Ajax:A new Approach to Web Applications”。他在这篇文章里介绍了一种技术,用他的话说,就叫:Ajax,是Asynchronous JavaScript + XML 的简写。这种技术能够想服务器请求额外的数据而无须加载整个页面(即刷新局部页面),会带来更好的用户体验。一时间,席卷全球。

ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取,即局部刷新,异步请求。如何理解局部刷新?就是在以前,如果要改变整个页面的内容,哪怕一丁点,就要重新加载整个页面,这会引起浪费网络带宽、用户体验不佳等问题;如果这局部刷新,就只要改变一个页面该改变的内容,即对一个页面的局部内容刷新,不会重新加载这个页面,好处是节约宽带,提高用户体验。所谓异步请求,就是浏览服务器在处理业务逻辑时,浏览器仍然可以作其他事情,而同步请求,指的是当客户端提要求,等待服务端处理,在这个等待过程中,客户端不可以做其他任何事情。异步请求显然可以提高用户的体验度。

二、 XMLHttpRequest对象

三、Ajax编程的四步

ajax 请求一般分成 4 个步骤。

1、创建 ajax 对象

在创建对象时,有兼容问题:

var oAjax = new XMLHttpRequest();   //for ie6 以上

var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); //for ie6

合并上面的代码:

var oAjax = null;

if(window.XMLHttpRequest){

    oAjax = new XMLHttpRequest();

}else{

    oAjax = new ActiveXObject('Microsoft.XMLHTTP');

}

  

2、连接服务器

在这里会用到 open() 方法。open() 方法有三个参数,第一个参数是连接方法即 GET 和 POST,第二个参数是 URL 即所要读取数据的地址,第三个参数是否异步,它是个布尔值,true 为异步,false 为同步。

oAjax.open('GET', url, true);

3、发送请求

send() 方法。

oAjax.send();

4、接收返回值

onreadystatechange 事件。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState:请求状态,返回的是整数(0-4)。

0(未初始化):还没有调用 open() 方法。

1(载入):已调用 send() 方法,正在发送请求。

2(载入完成):send() 方法完成,已收到全部响应内容。

3(解析):正在解析响应内容。

4(完成):响应内容解析完成,可以在客户端调用。

responseText:返回内容,即我们所需要读取的数据。需要注意的是:responseText 返回的是字符串。需要注意的是,请求状态为4并且服务器状态为400,才可以接受数据。

oAjax.onreadystatechange=function(){

    if(oAjax.readyState==4){

        if(oAjax.status==200){

            fnSucc(oAjax.responseText);

        }else{

            if(fnFaild){

                fnFaild();

            }

        }

    }

};

  

四、通过编程实际理解Ajax

  4.1 理解请求状态的变化

  <!DOCTYPE html>

<html>

<head>

    <title>XMLHttpRequest准备转态码的改变</title>

    <meta charset="UTF-8">

</head>

<body>

<script>

    var xhr=new XMLHttpRequest();

       alert(xhr.readyState);//0(未初始化),,还没有调用 open() 方法。

     xhr.open("post","user.txt",true);

    alert(xhr.readyState);//1(载入):已调用 send() 方法,正在发送请求。

     xhr.send();

    xhr.onreadystatechange=function(){

        //2(载入完成):请求发送完毕,开始接受响应内容。

        // 3(解析):接受响应内容完毕,开始解析响应内容。

        //4(完成):响应内容解析完成,可以在客户端调用。

        alert(xhr.readyState);

    }

</script>

</body>

</html>

  

 4.2 服务端转态的变化

   <!DOCTYPE html>

<html>

<head>

    <title>Ajax中服务端的状态码</title>

    <meta charset="UTF-8">

</head>

<body>

<script>

    var xhr=new XMLHttpRequest();

     xhr.open("post","user.txt",true);

     xhr.send();

    xhr.onreadystatechange=function(){

        //转态码200:服务端运行正常

        alert(xhr.status+":"+xhr.statusText);

    }

</script>

</body>

  

如果服务端的地址并不存在,比如修改如下:

<!DOCTYPE html>

<html>

<head>

    <title>Ajax中服务端的状态码</title>

    <meta charset="UTF-8">

</head>

<body>

<script>

    var xhr=new XMLHttpRequest();

     xhr.open("post","user2.txt",true);

     xhr.send();

    xhr.onreadystatechange=function(){

        //转态码404:资源没找到

        alert(xhr.status+":"+xhr.statusText);

    }

</script>

</body>

</html>

  

4.3 理解局部刷新

<!DOCTYPE html>

<html>

<head>

    <title>理解Ajax中的局部刷新</title>

    <meta charset="UTF-8">

</head>

<body>

</body>

<h2>理解Ajax中的局部刷新</h2>

<h4>只改变span中的内容,不会改变和刷新整个页面</h4>

<button id="btn">改变span中的innerHTML</button><br/>

<span id="spanDemo">旧的内容</span>

<script>

    function partRefresh(){

        var xhr=new XMLHttpRequest();

        xhr.open("post","user2.txt",true);

        xhr.send();

        xhr.onreadystatechange=function(){

            if(xhr.readyState==4&&xhr.status==200){

                document.getElementById("spanDemo").innerHTML=xhr.responseText;

            }

        }

    }

    document.getElementById("btn").onclick=function(){

        partRefresh();

    }

</script>

</html>

  

4.4 理解异步请求

<!DOCTYPE html>

<html>

<head>

    <title>理解Ajax中的异步请求</title>

    <meta charset="UTF-8">

</head>

<body>

</body>

<h2>理解Ajax中的异步请求</h2>

<h4>按照程序的从上往下执行的顺序,先改变span1的内容,然后才改变span2的内容,但是,当使用异步请求,<br/>

    当一个请求(改变span1的内容)在服务端所花费时间较多时, 浏览器不是等待服务端给它响应,<br/>

    而是可以继续往下执行其他任务(改变span2的内容)。<br/>

    等服务端处理完毕,给客户端响应式,浏览器处理这个响应(改变span1的内容)</h4>

<button id="btn">改变span中的innerHTML</button><br/>

<span id="spanDemo">旧的内容</span><br/>

<span id="spanDemo2">旧的内容2</span>

<script>

    function partRefresh(){

        var xhr=new XMLHttpRequest();

        xhr.open("post","user2.txt",true);

        xhr.send();

        xhr.onreadystatechange=function(){

  //通过for循环嵌套,模拟服务端处理这个业务逻辑需要花费较长的时间

             for(var m=0;m<=1000;m++){

                 for(var n=0;n<=100;n++){

                     if(xhr.readyState==4&&xhr.status==200){

                         document.getElementById("spanDemo").innerHTML=xhr.responseText;

                     }

                 }

                 }

             }

    }

    function changeContext(){

        document.getElementById("spanDemo2").innerHTML="内容被改变";

    }

    document.getElementById("btn").onclick=function(){

        partRefresh();

        changeContext();

    }

</script>

</html>

  

五、Ajax应用 :本地读取

1、读取本地文本文件

第一步:创建一个user.txt,如下图:

第二步:编码

<!DOCTYPE html>

<html>

<head>

    <title>Ajax读取服务端的文本文件</title>

    <meta charset="UTF-8">

</head>

<body>

<script>

    var xhr=new XMLHttpRequest();

     xhr.open("post","user.txt",true);

     xhr.send();

    xhr.onreadystatechange=function(){

       if(xhr.readyState==4&&xhr.status==200){

            var jsonStr=  xhr.responseText;

           alert(jsonStr);

        }

    }

</script>

</body>

</html>

  

运行结果为:

2、读取XML文件

前面章节已经讲过,此处略。

六、Ajax应用二:访问node.js服务端

    6.1 提供访问node.js的接口和数据

要想Ajax访问node.js服务端,先要安装node.js服务端(见相关资料)。

第一步:要把node -api拷贝到相应的地方,如下图:

第二步、启动服务器

把node-api整个文件夹拷贝到Q:\Program Files\node-api下,使用npm start命令启动服务器

Q:\Program Files\node-api是node-api的安装目录

第三步、在IE地址栏中输入http://localhost:3000/api/就能访问默认资源,输入

http://localhost:3000/api/2 访问2.json文件

6.2 浏览器的跨域问题

做前端的程序员,经常用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制

也就是跨域问题。

跨域是指从一个域名的网页去请求另一个域名的资源。比如从http://www.baidu.com/ 页面去请求 http://www.google.com 的资源。跨域的严格一点的定义是:只要协议、域名、端口有任何一个的不同,就被当作是跨域。

有人会说用JSONP了。如果后台的数据接口只是返回单纯的json数据呢,而且也不能修改符合JSONP的方式的数据形式。 这个时候,我们该怎么办呢? 如果你用的浏览器是Chrome的话,那么就有福音了。在打开Chrome的地址后边加上 --args --disable-web-security就可以屏蔽安全访问了[ --args:此参数可有可无],然后就随意的调用不同域下的数据了。

具体操作步骤如下:

windows系统(Win7)下的Chrome

1、关闭所有打开的Chrome。(重要)。否则,将没有效果!

2、创建Chrome的快捷方式,修改快捷方式的目标为:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security

配置好以后,重新打开谷歌浏览器,见下图:

IE浏览器默认支持跨域获取数据,所以不需设置。

6.3 通过Ajax,动态加载node.js服务端的JSON数据

<!DOCTYPE html>

<html>

<head>

    <title>通过AJAX,接受服务端的数据</title>

    <meta charset="UTF-8">

</head>

<body>

<h3>通过AJAX,访问node.js服务器,解析JSON数据</h3>

<button id="btn">Ajax加载JSON数据</button>

<table id="employee_table" border="1">

    <caption>雇员信息</caption>

    <thead>

    <tr>

        <td>FirstName</td>

        <td>LastName</td>

    </tr>

    </thead>

    <tbody id="tbody">

    </tbody>

</table>

<script>

    function getJSON(){

    var xhr=new XMLHttpRequest();

     xhr.open("get","http://localhost:3000/api/2",true);

     xhr.send();

    xhr.onreadystatechange=function(){

          if(xhr.readyState==4&&xhr.status==200){

              var jsonStr=xhr.responseText;

              alert(jsonStr);

                var json=JSON.parse(jsonStr);

              for(var t=0;t<json['employees'].length;t++){

                  var tr=document.createElement("tr");

                  var td=document.createElement("td");

                  td.innerHTML=json['employees'][t]['firstName'];

                  var td2=document.createElement("td");

                  td2.innerHTML=json['employees'][t]['lastName'];

                  tr.appendChild(td);

                  tr.appendChild(td2);

                  document.getElementById("tbody").appendChild(tr);

          }

    }

    }

    }

document.getElementById("btn").onclick=function(){

     getJSON();

}

</script>

</body>

</html>

  

这就是ajax的全部教程,希望对你有帮助!

Ajax,学习教程!的更多相关文章

  1. Ajax学习教程在线阅读

      1.什么是AJAX ?(1) 2.什么是AJAX ?(2) 3.什么是AJAX ?(3) 4.什么是AJAX ?(4) 5.Ajax基础教程(1)-Ajax简介 1.1 Web应用简史 6.Aja ...

  2. Ajax 完整教程。。转载

    Ajax 完整教程 第 1 页 Ajax 简介 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应 ...

  3. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  4. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  5. AJAX学习必备三本书

    <AJAX基础教程>AJAX必备图书之一.国内发行的第一本AJAX图书,也是目前最好的AJAX入门书,如果您是AJAX新手,此书是最好的入门图书.本书基本包括了实现Ajax需要了解的大部分 ...

  6. AJAX 入门教程

    一.前言 AJAX 是我们教程用到的请求数据的技术,在这里我就给自己做一个小结. 二.案例 我使用的是 JQuery 的 AJAX 来实践.后端服务我使用的是 c# 的mvc. 后端代码: using ...

  7. Deep Learning 19_深度学习UFLDL教程:Convolutional Neural Network_Exercise(斯坦福大学深度学习教程)

    理论知识:Optimization: Stochastic Gradient Descent和Convolutional Neural Network CNN卷积神经网络推导和实现.Deep lear ...

  8. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  9. Ajax学习心得

    Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网 ...

  10. MyBatis入门学习教程-使用MyBatis对表执行CRUD操作

    上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...

随机推荐

  1. Python 入门之 闭包

    Python 入门之 闭包 1.闭包 (1)在嵌套函数内使用(非本层变量)和非全局变量就是闭包 (2)_ closure _ 判断是不是闭包 def func(): a = 1 def foo(): ...

  2. 通过编写串口助手工具学习MFC过程——(三)Unicode字符集的宽字符和多字节字符转换

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  3. Python字符串中添加、插入特定字符

    分析 我们将添加.插入.删除定义为: 添加: 在字符串的后面或者前面添加字符或者字符串 插入: 在字符串之间插入特定字符 在Python中,字符串是不可变的.所以无法直接删除.插入字符串之间的特定字符 ...

  4. django2.0变动数据库设置外键报错

    1.报错TypeError: __init__() missing 1 required positional argument: 'on_delete' django2.0以后创建数据库外键的时候必 ...

  5. 在java程序中利用线程

    package 第十一章; import java.awt.Button; import java.awt.Color; import java.awt.Font; import java.awt.F ...

  6. 034-openstack中虚拟机启动后主机名设置问题

    openstack中虚拟机启动后主机名设置问题,在centos7中设置hostname后怎么都是原来的hostname,根本无效. 方法一: 在centos7中除了修改hosts文件和network文 ...

  7. PAT Advanced 1036 Boys vs Girls (25 分)

    This time you are asked to tell the difference between the lowest grade of all the male students and ...

  8. 图像描点标注-labelme的安装及使用

    1.直接使用pip安装lebelme pip install labelme 2.labelme的使用 找到labelme的安装路径,先找到python的安装路径如我的,C:\Users\Think\ ...

  9. Codeforces Round #573 (Div. 2) E. Tokitsukaze and Duel (博弈)

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  10. ZX树初步

    一些数据结构,比如线段树或平衡树,他们一般是要么维护每个元素在原序列中的排列顺序,要么是维护每个元素的大小顺序,若是像二者兼得那么就想想主席树. 给你多个不同的数字问你1-N第K大的数是多少 最简单的 ...