什么是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. drupal7安装中文错误

    安装中文错误 星期四, 07/04/2013 - 15:06 — tao_3000 更多0 An AJAX HTTP error occurred. HTTP Result Code: 200 Deb ...

  2. 每日英语:A Whiff Of 'Welcome Home'

    Buying real estate involves weighing a lot of factors: location, price . . . smell? Some condo devel ...

  3. log4j总结

    log4j介绍 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器.NT的事件记录器.UNIX Sysl ...

  4. 消息中间件的技术选型心得-RabbitMQ、ActiveMQ和ZeroMQ

    消息中间件的技术选型心得-RabbitMQ.ActiveMQ和ZeroMQ 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs RabbitMQ.Active ...

  5. 第一章:Symfony2和HTTP基本原理

    恭喜你!通过学习Symfony2,你将用你自己的方式开发出更加高效.全面和流行的Web应用(当然,要受到用人单位或同行的欢迎,还是得靠你自己).Symfony2的存在是为了要解决最根本的问题:即提供一 ...

  6. Mac mongodb 配置安装

    简单总结就几条,比较简单配置mongodb. 1,首先下载安装包:百度云下载地址 2,下载之后解压到自己常放的工作目录下,然后开始配置一下你的Mac环境 vim ~/.bash_profile 添加m ...

  7. Android 手机技巧

    1. 使用其它手机做热点上网,最怕的就是有些应用会在连接 WIFI 时偷偷做一些事情,比如备份/同步数据等等.在这流量就是金钱的时代,不能白白让钱流走,这时你需要进入“设置 -> 浏览使用情况 ...

  8. PLSQL登录弹出空白框如何解决

     转自:http://jingyan.baidu.com/article/066074d6760959c3c21cb0d6.html   出现登录弹出空白框这是由于win7的安全性提高了,在PLSQL ...

  9. CSS3实现旋转的太极图(二):只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  10. 解决Visual Studio 2010新建工程时出现『1>LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt』错误

    VS2010在经历一些更新后,建立Win32 Console Project时会出"error LNK1123" 错误.   解决方案为: 第一步:将:项目|项目属性|配置属性|清 ...