1、什么是 Ajax?

　　Ajax，英文名 Asynchronous JavaScript and XML，也就是异步的 JavaScript 和 XML。它不是一门新的语言，而是一种使用现有标准的新方法，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容，而且不需要任何浏览器插件，只需要用户允许 JavaScript 在浏览器上执行。

 

2、Ajax 的工作原理

由上图我们可以看到，浏览器首先 创建一个 XMLHttpRequest 对象，然后将这个对象发送给服务器；服务器响应并封装一些数据回传给浏览器；浏览器接收到服务器的响应数据，根据数据做出相应的操作，比如更新页面内容等操作。

 

3、如何使用 Ajax?

①、创建 XMLHttpRequest 对象

②、编写状态响应函数

③、调用 open() 方法

④、发送请求 send()

 下面我们通过一个简单的例子来模拟 通过 Ajax 来更新页面上的内容

第一步：首先新建一个 AjaxTest.html 文件

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/AjaxTest.js"></script>//这里引用了 AjaxTest.js 文件
</head>
<body>
<div style="border:1px solid red;width:200px;height:200px;" id="mydiv"></div>
<input type="button" onclick="Ajax()" value="发送Ajax 请求改变内容" />  //定义点击事件 Ajax()
</body>
</html>

　　页面显示效果如下：

第二步：新建一个 formInfo.json 文件，里面存放将要更新的内容

1
2
3
4
{
  "name":"ys",
  "age":24
}

第三步：新建一个 AjaxTest.js 文件，编写 Ajax 代码

　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function Ajax(){
    var xhr = null;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr=new XMLHttpRequest();
    }else{
        // IE6, IE5 浏览器执行代码
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function(){
        if (xhr.readyState==0 && xhr.status==200)
        {
            alert("请求未初始化");
        }
        if (xhr.readyState==1 && xhr.status==200)
        {
            alert("服务器连接已建立");
        }
        if (xhr.readyState==2 && xhr.status==200)
        {
            alert("请求已接收");
        }
        if (xhr.readyState==3 && xhr.status==200)
        {
            alert("请求处理中");
        }
        if (xhr.readyState==4 && xhr.status==200)
        {
            alert("请求已完成，且响应已就绪");
            document.getElementById("mydiv").innerHTML=xhr.responseText;
        }
    }
    xhr.open("GET","../json/fromInfo.json",true);
    xhr.send();
}

　　当我们点击按钮，界面会更新为：

 

4、对 Ajax 各个步骤的解析

①、创建 XMLHttpRequest 对象

通常来说，所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。所以创建 XMLHttpRequest 对象可以直接这样

1
var xhr=new XMLHttpRequest();

但是老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象，并不支持 XMLHttpRequest 对象。所以我们这样创建：

1
var xhr=new ActiveXObject("Microsoft.XMLHTTP");

那么综合起来，创建 XMLHttpRequest  对象的方法为：

1
2
3
4
5
6
7
8
var xhr = null;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr=new XMLHttpRequest();
    }else{
        // IE6, IE5 浏览器执行代码
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }

 该对象的属性为：

上面的例子我们可以看到 XMLHttpRequest 对象为：

 

　　

②、编写状态响应函数

状态响应函数也就是 onreadystatechange 事件

 

常见的 status 响应状态码：

 

③、调用 open() 方法

 open(string method,string url,boolean asynch,String username,string password)

指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；
method:表示http请求方法，一般使用"GET","POST".
url：表示请求的服务器的地址；
asynch：表示是否采用异步方法，true为异步，false为同步；
后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。

 

④、发送请求 send()

 send(content)

向服务器发出请求，如果采用异步方式，该方法会立即返回。content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。

 

 

 

实际开发中，有很多开源的库已经给我们封装好了，我们直接用就行了。

1、jQuery 的 Ajax 请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$.ajax({
        type : "post",  //请求方式
        url : "../json/fromInfo.json",  //请求路径
        data : "",      //传输到服务器的数据
        cache : false,  //是否有缓存
        async : false,  //同步和异步，false 表示异步
        dataType : "json",  //预期的服务器响应数据类型
        beforeSend:function(xhr){
            alert(xhr);
            alert('发送前');
        },
        success:function(data,textStatus,jqXHR){
            alert(data);  //json 文件中的数据，是一个 object 对象
            alert(textStatus); //值为 success，表示成功状态码
            alert(jqXHR);  //这第三个参数封装响应的一些信息
            document.getElementById("mydiv").innerHTML=jqXHR.responseText;
        },
        error:function(xhr,textStatus){
            alert('错误');
            alert(xhr);
            alert(textStatus);
        },
        complete:function(){
            alert('结束');
        }
    });

　　对上面相应参数的解析：

 

2、jQuery 的 get 请求

$.get(url,data,success(response,status,xhr),dataType)

说明：url为请求地址，data为请求数据的列表，callback为请求成功后的回调函数，dataType 为服务器返回数据类型。第四个参数 dataType，如果不写，默认返回字符串

1
2
3
4
5
6
7
8
$.get(
        "../json/fromInfo.json",
        "",
        function(response,status,xhr){
            alert(xhr.responseText);
        },
        "json"
    );

　

 

　

3、jQuery 的 post 请求

 $.post(url,data,success(response,status,xhr),dataType)

　参数和 get 请求一样

Ajax用法的更多相关文章

  1. Ajax 用法

    Ajax 用法 var total=100;                 var orderName='sssss';                 var orderDescrib='dddd ...

  2. jQuery $.post $.ajax用法

    jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...

  3. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  4. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  5. jQuery中的ajax用法案例

    什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...

  6. ajax用法流程

    这里是用javascript做的一个ajax的一个用法以及总结概括.供友友们进行参考. 1 window.onload=function() { var oBtn=document.getElemen ...

  7. java web 之 AJAX用法

    AJAX :Asynchronous JavaScript And XML 指异步 JavaScript 及 XML一种日渐流行的Web编程方式 Better Faster User-Friendly ...

  8. 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

    在WEB开发中异步请求方式普遍使用,ajax技术减少程序员的工作量,也提升用户交互体验.AJAX的四种异步请求方式都能实现基本需求,闲话不多说,直接切入正题. 1.$.getJSON $.getJSO ...

  9. mui初级入门教程（三）— html5+ XMLHttpRequest 与mui ajax用法详解

    文章来源:小青年原创发布时间:2016-05-29关键词:mui,html5+,XMLHttpRequest,ajax,懒加载转载需标注本文原始地址: http://zhaomenghuan.gith ...

  10. Ajax 用法简介

    使用Ajax实现页面的局部刷新 一.不依赖jquery时是这样的用法: var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(ev ...

随机推荐

  1. QThread 爬坑之旅（三种办法解决QObject: Cannot create children for a parent that is in a different thread）

    Cannot create children for a parent that is in a different thread. 在Qt的官方文档,大家知道有两种方式使用QThread. You ...

  2. Sqlite 命令行导出、导入数据（直接支持CSV）

    打开命令行 导出数据到data.csv D:\project>sqlite3.exe old.db SQLite version 3.21.0 2017-10-24 18:55:49 Enter ...

  3. DDR工作原理

    DDR SDRAM全称为Double Data Rate SDRAM,中文名为“双倍数据流SDRAM”.DDR SDRAM在原有的SDRAM的基础上改进而来.也正因为如此,DDR能够凭借着转产成本优势 ...

  4. Centos7 ssh免密码登陆

    摘要:安装openssl openssl-devel 不过有些centos自带 192.168.161.5  192.168.161.15 本版本用centos7 (192.168.161.5) yu ...

  5. avalon 笔记---Mr.wing

    Avalon笔记步骤一:引用js文件<script src="js/avalon.js"></script>步骤二:<script> var v ...

  6. HDU 5446 Unknown Treasure Lucas+中国剩余定理+按位乘

    HDU 5446 Unknown Treasure 题意:求C(n, m) %(p[1] * p[2] ··· p[k])     0< n,m < 1018 思路:这题基本上算是模版题了 ...

  7. 微软加速Visual Studio和Azure DevOps 云升级

    在 2018 微软技术暨生态大会(Microsoft Tech Summit)上,微软宣布围绕 Visual Studio 和 Visual Studio Code 开发平台提供一系列新功能与服务,并 ...

  8. android+myeclipse+mysql下拉框数据绑定

    原创作品,允许转载,转载时请务必声明作者信息和本声明.http://www.cnblogs.com/zhu520/p/8027036.html 本人小白,那个大神看到有问题可指出,谢谢.... 一:我 ...

  9. 零基础学python-7.6 字符串格式化表达式

    字符串格式化同意在一个单个的步骤中对一个字符串运行多个特定类型的替换 特别是给用户提示的时候,格式化很方便 实现方法: 1.格式化表达式,类似于c语音的printf 在表达式中,我们使用%二进制操作符 ...

  10. 位运算（&amp;、|、^）与逻辑运算（&amp;&amp;、 ||）差别

    刚无意在一篇文章中看到了位运算(&.|)和逻辑运算(&&.||)的介绍.想起了自己薄弱的基础知识.于是百度了几把总结了下. 首先从概念上区分下,位运算是将运算符两边的数字换算成 ...