1、什么是 Ajax?

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

2、Ajax 的工作原理

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

3、如何使用 Ajax?

①、创建 XMLHttpRequest 对象

②、编写状态响应函数

③、调用 open() 方法

④、发送请求 send()

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

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

<!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 文件，里面存放将要更新的内容

{

  "name":"ys",

  "age":24

}

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

　　

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 对象可以直接这样

var xhr=new XMLHttpRequest();

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

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

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

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 请求：

$.ajax({

        type : "post",  //请求方式

        url : "../json/fromInfo.json",  //请求路径

        data : "",      //传输到服务器的数据

        cache : false,  //是否有缓存

        async : false,  //同步和异步，false 表示同步，默认为true

        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，如果不写，默认返回字符串

$.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.ActionLink 用法

    Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...

  2. MVC学习十二：Ajax.ActionLink用法

    Ajax.ActionLink用法 <!--使用Ajax.BeginForm必须引用的js文件--> <script type="text/javascript" ...

  3. 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...

  4. js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  5. ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...

  6. 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...

  7. 详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第 ...

  8. jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...

  9. 理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] ...

  10. ajax实战用法详解

    谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback])载入远 ...

随机推荐

  1. React Native学习——动画Animated（笔记）

    很多地方都需要用到动画,先看下文档吧. 一.两个互补的动画系统 LayoutAnimation:用于全局的布局动画 Animated:用于创建更精细的交互控制的动画(主要是这个) 二.Animated ...

  2. Spring Cloud Ribbon 整合 Hystrix

    在前面随笔 Spring Cloud 之 Ribbon 的ribbon工程基础上进行改造 1.pom.xml 加入依赖 <dependency> <groupId>org.sp ...

  3. PHP面向对象-----魔术方法

    PHP面向对象-----魔术方法 __get($name)--触发时机:当调用一个不访问的成员属性的时候,会自动触发,可以利用这个方法来完成对不可调用的属性进行调用,但是不能设置值 ___set($n ...

  4. 域名和ip不能访问的原因

    centos的话可能默认可能会有firewalld,可以执行 systemctl stop firewalld systemctl disable firewalld 禁用后在看看,前提都是域名得备案 ...

  5. 如何在HTTP头中隐藏PHP版本号

    PHP 配置默认允许服务器在 HTTP 响应头 X-Powered-By 中显示安装在服务器上的 PHP 版本.出于服务器安全原因(虽然不是主要的要担心的威胁),建议你禁用或隐藏此信息,避免那些针对你 ...

  6. 关于APIcloud中的登录与注册的简单实现

    1.apiclou实现页面的登录方式,不适用自带的登录. html代码 <div class="login_ipt_box"> <img class=" ...

  7. Akka（43）： Http：SSE-Server Sent Event - 服务端主推消息

    因为我了解Akka-http的主要目的不是为了有关Web-Server的编程,而是想实现一套系统集成的api,所以也需要考虑由服务端主动向客户端发送指令的应用场景.比如一个零售店管理平台的服务端在完成 ...

  8. winform在鼠标操作时要判断是否按下Ctrl键

    (Control.ModifierKeys & Keys.Control) == Keys.Control

  9. HDU 1711 Number Sequence(字符串匹配)

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  10. Codeforces Round #261 (Div. 2)459D. Pashmak and Parmida&#39;s problem（求逆序数对）

    题目链接:http://codeforces.com/contest/459/problem/D D. Pashmak and Parmida's problem time limit per tes ...