什么是ajax？W3School中给ajax的定义是：

　　1、AJAX = 异步 JavaScript 和 XML。

　　2、AJAX 是一种用于创建快速动态网页的技术。

　　3、通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　4、传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

　　通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的。使用ajax的能够异步加载数据，及时验证数据，不需要刷新整个页面（有时会局部加载），进而能提高用户体验并且节省流量。

1、基本API：new XMLHttpRequest()、open()、send()、onreadystatechange()、responseText()等

　　①：使用ajax之前必须要创建一个对象，要用到new XMLHttpRequest()。

　　var xhr = new XMLHttpRequest();

　　值得一提的是，在老的浏览器（比如IE6、IE5）中并不支持XMLHttpRequest()对象。在老浏览器 中，XHR(XMLHttpRequest的缩写，下面的都是指该对象)对象是通过MSXML库中的一个ActiveX对象实现的。为了兼容模式，我们可以这样子去创建XMLHttpRequest对象。

　　if (window.XMLHttpRequest){       //如果浏览器支持该对象

　　var xhr = new XMLHttpRequest();

　　}else{

　　var xhr = new ActiveXObject("Msxml2.XMLHTTP");   //如果是低版本浏览器

　　}

　　在IE 中可能会遇到三种不同版本的XHR 对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和MXSML2.XMLHttp.6.0。

　　②：创建好xhr对象后，接下来就是要使用该对象，就要调用到一个方法：open();

　　它接受3 个参数：要发送的请求的类型（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子。

　　xhr.open("get", "example.php", true);

　　这行代码会启动一个针对example.php 的GET 请求，调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。一般情况下布尔值为true，表示需要异步发送请求。发送工作准备就绪后调用send();方法发送请求。

　　xhr.send(null);

　　send方法接受一个参数，作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。对于get的请求类型，是不需要发送数据的，所以只需要传入null，如果是post的请求类型，则必须传入数据。

　　③：调用send()之后，请求就会被分派到服务器。由于这次请求是同步的，JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下。

　　　　responseText：作为响应主体被返回的文本。

　　　　responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。

　　　　status：响应的HTTP 状态。

　　　　statusText：HTTP 状态的说明。

　　　　当status为200到300或者304的时候，表明响应返回成功。（详细可以见HTTP状态码及文字说明）。同时xhr对象有个readyState 属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下。　　

　　　 　0：未初始化。尚未调用open()方法。
　　　　 1：启动。已经调用open()方法，但尚未调用send()方法。
　　　　 2：发送。已经调用send()方法，但尚未接收到响应。
　　　　 3：接收。已经接收到部分响应数据。
　　　　 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

　　　　只要readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件。可以利用这个事件来检测每次状态变化后readyState 的值。通常，我们只对readyState 值为4 的阶段感兴趣，因为这时所有数据都已经就绪。代码表示以下：

　　　　xhr.onreadystatechange = function (){         //当xhr对象触发readystatechange 事件时

　　　　　　alert(ajax.readyState);          //测试readyState 属性的值

　　　　　　if (xhr.readyState == 4){      //当readyState等于4说明数据接收完成

　　　　　　if (xhr.status >= 200 && xhr.status < 300 ||xhr.status == 304){//响应返回成功，并且将返回值传给了responseText属性，responseText内容类型正确

　　　　　　　　alert(xhr.responseText);                      //弹出xhr对象responseText属性的值

　　　　　　}else{

　　　　　　　　alert(xhr.statusText);                   //如果不成功，则弹出错误HTTP状态说明
　　　　　　　　}
　　　　　　}
　　　　}

以上就是一个完整的pet请求类型的ajax使用方法，整理代码如下：

　　if (window.XMLHttpRequest){       //如果浏览器支持该对象

　　　　var xhr = new XMLHttpRequest();  //创建对象

　　}else{

　　　　var xhr = new ActiveXObject("Msxml2.XMLHTTP");   //如果是低版本浏览器

　　}

　　xhr.open("get", "example.php", true);

　　xhr.send(null);

　　xhr.onreadystatechange = function (){         //当xhr对象触发readystatechange 事件时

　　　　　　alert(ajax.readyState);          //测试readyState 属性的值

　　　　　　if (xhr.readyState == 4){      //当readyState等于4说明数据接收完成

　　　　　　if (xhr.status >= 200 && xhr.status < 300 ||xhr.status == 304){   //响应返回成功，并且将返回值传给了responseText属性，responseText内容类型正确

　　　　　　　　alert(xhr.responseText);                      //弹出xhr对象responseText属性的值

　　　　　　}else{

　　　　　　　　alert(xhr.statusText);                   //如果不成功，则弹出错误HTTP状态说明
　　　　　　　　}
　　　　　　}
　　　　}

下面简单说一下post请求类型与get不同的地方：

　　首先，open()方法中第一个参数传入的是post，就可以初始化一个post请求。

　　　　xhr.open("get", "example.php", true);

　　然后将Content-Type 头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型

　　接着向post发送请求的send()方法传入数据，这是必须的。

代码不在赘述，除了下面部分做修改大概相同。

　　xhr.open("post", "example.php", true);

　　xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

　　xhr.send(data);

JQ的ajax

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>

</head>

<body>

    <input id="content" type="text">

    <input id="send" type="button" value="发送消息">

</body>

<script type="text/javascript">

$(function (){

    $("#send").on("click",function (){

        $.ajax({

            url:"sendHandle.php",

            data:{

                content:$("#content").val()

            },

            success:function (s){

                alert(s);

            }

        });

    });

});

</script>

</html>

Ajax学习整理的更多相关文章

  1. Ajax学习整理笔记

    AJAX技术的出现使得javascript技术大火.不懂AJAX的同学百度一下,了解AJAX能做什么就可以了. 代码: <!DOCTYPE html> <html> <h ...

  2. dataTables 插件学习整理

    在项目中使用了dataTables 插件,学习整理一下. dataTables 的官方中文网站 http://www.datatables.club 引入文件: 所有的都要引入 jq文件 1. dat ...

  3. 《AngularJS学习整理》系列分享专栏

    <AngularJS学习整理>系列分享专栏   <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...

  4. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  5. TweenMax学习整理--特有属性

    TweenMax学习整理--特有属性   构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓 ...

  6. HttpClient学习整理

    HttpClient简介HttpClient 功能介绍    1． 读取网页(HTTP/HTTPS)内容    2.使用POST方式提交数据(httpClient3)    3． 处理页面重定向    ...

  7. Ajax学习心得

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

  8. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  9. !!对python列表学习整理列表及数组详细介绍

    1.Python的数组分三种类型:(详细见 http://blog.sina.com.cn/s/blog_6b783cbd0100q2ba.html) (1) list 普通的链表,初始化后可以通过特 ...

随机推荐

  1. JAVA自动化测试数据设计

    数据管理是很重要的,数据管理与方法一样,依然是有层次的,我们在测试的过程中,可能会有多个环境,每个环境的URL啊,登录名啊,数据库连接地址啊等等不一样,我们可以把这些环境每个都配置一个数据文件,里面写 ...

  2. Centos单网卡配置多个IP的方法

    网上好多介绍一个网卡多个IP的方法,都有些问题,下面是实践可行的方法 DEVICE="eth0" TYPE="Ethernet" BOOTPROTO=none ...

  3. 菜鸟教程之工具使用（十一）——Eclipse去掉未使用的引用

    大家在写代码的时候经常会看到如下的情况: 大家都知道这是因为引入了未使用的包,所以Eclipse给出了提示,告诉你这些是无用的引用,这些无用的引用即影响了美观,又增加了代码占用的空间,还给代码的编译增 ...

  4. Hibernate一些防止SQL注入的方式

    Hibernate在操作数据库的时候,有以下几种方法来防止SQL注入,大家可以一起学习一下. 1.对参数名称进行绑定: Query query=session.createQuery(hql); qu ...

  5. 自定义圆环progressbar

    RoundProgressBar.java /** * RoundProgressBar.java [v1.0.0] * classes: com.example.audiorecordingtest ...

  6. Cocos2d-JS项目之一：环境(IDE 运行js-tests、IDE 和 studio 统一工程)

    环境:cocos 引擎(包括 studio)2.2.1 for Mac.cocos2d-js-v3.5.Cocos Code IDE 1.2 for Mac,cocos 引擎指的是下面这个东西: 各种 ...

  7. EPLAN P8导线颜色的设置

    P8里的导线应称为"连接",连接的颜色代表了其电位的传递路径,如可以给三相电源设置成黑色,PE设为绿色,N设为蓝色等等.  P8中电位在连接和元器件中传递的方法是由元器件的连接点属 ...

  8. coreData 深入理解4 --总结 (线程安全与同步--iOS5 前后对比)

    Core Data是iOS中很重要的一个部分,可以理解为基于SQLite(当然也可以是其他的Storage,如In-memory,只是SQLite比较常见)的一个ORM实现,所以有关系数据库的特性,又 ...

  9. ICMP type code 对应表(转)

    ICMP类型 TYPE CODE Description Query Error 0 0 Echo Reply——回显应答(Ping应答) x   3 0 Network Unreachable——网 ...

  10. Sublime Text3 插件集合

    下载地址:http://download.csdn.net/detail/yinluhui/9029791 [包含的插件有: AndyJS2.BracketHighlighter.emmet-subl ...