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. 用Redis轻松实现秒杀系统

    秒杀系统的架构设计 秒杀系统,是典型的短时大量突发访问类问题.对这类问题,有三种优化性能的思路: 写入内存而不是写入硬盘 异步处理而不是同步处理 分布式处理 用上这三招,不论秒杀时负载多大,都能轻松应 ...

  2. php简单实现发微博动态

    首先,肯定是注册成为开发者新浪微博开放平台 选择网站应用,填写一些基本信息 填完后在'我的应用'中,会看到刚创建的应用信息,我们只是简单的测试一下,所以其他复杂的注册信息都不用填写,有这些就够了 很重 ...

  3. 直播一：H.264编码基础知识详解

    一.编码基础概念 1.为什么要进行视频编码? 视频是由一帧帧图像组成,就如常见的gif图片,如果打开一张gif图片,可以发现里面是由很多张图片组成.一般视频为了不让观众感觉到卡顿,一秒钟至少需要16帧 ...

  4. Spring Cloud Zuul

    新建Spring Boot工程,命名为zuul 1.pom.xml添加依赖 <?xml version="1.0" encoding="UTF-8"?&g ...

  5. html5 canvas 画板

    <!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...

  6. R语言与数据分析之八：时间序列--霍尔特指数平滑法

    上篇我和小伙伴们分享了简单指数平滑法,简单指数平滑法仅仅能预測那些处于恒定水平和没有季节变动的时间序列,今天和大家分享非恒定水平即有增长或者减少趋势的.没有季节性可相加模型的时间序列预測算法---霍尔 ...

  7. Office Add-in 架构和入门

    作者:陈希章 发表于2017年7月12日 前言 从2月26日开始写这个Office 365开发概览系列文章-- https://aka.ms/office365devguide,到现在已经有17篇文章 ...

  8. 【SqlServer】JSON函数

    1   概述 本篇文件将结合MSND简要分析Sqlserver中JSON函数,主要包括ISJSON,JSON_VALUE,JSON_MODIFY,JSON_QUERY. 2   具体内容 2.1  J ...

  9. .NET Core容器化之多容器应用部署@Docker-Compose

    1.引言 紧接上篇.NET Core容器化@Docker,这一节我们先来介绍如何使用Nginx来完成.NET Core应用的反向代理,然后再介绍多容器应用的部署问题. 2. Why Need Ngin ...

  10. ssm学习（四）--完整的增删改查demo

    上一篇文章简要介绍了将sping mvc加入整个框架,算是完成了ssm的集成.本节继续前面的内容,结合spring mvc做一个简单的增删改查demo. 1.首先,重写一下GeckoList.jsp页 ...