一 什么是Ajax

Ajax是(Asynchronous JavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用,不是一门新语言。它是用JavaScript编写。与xml的关系就是可以读取和返回xml文件。

Ajax在2005年提出的,在2006,2007年迅速的发展,目前很多网站都使用了ajax技术,在招聘软件工程师时,ajax技术是必须要求掌握的。 AJAX即“Asynchronous JavaScript and XML”ajax技术包含了几种技术:javascript、xml、css、xstl、dom、xhtml和XMLHttpRequest七种技术,所以ajax就像是粘合剂把七种技术整合到一起,从而发挥各个技术的优势,威力惊人

① ajax(asynchronouse javascript and xml) 异步的javascript 和 xml

② 是7种技术的综合,它包含了七个技术( javascript xml xstl xhtml dom xmlhttprequest , css),  ajax  是一个粘合剂,

③ ajax是一个与服务端语言无关的技术. 即可以使用在(php/java ee/.net网站/ asp)

④ ajax可以给客户端返回三种格式数据(文本格式 ,xml , json格式)

⑤ 无刷新数据交换技术有以下: flash, java applet, 框架, iframe,  ajax)

二  Ajax中的对象和方法说明

Ajax的核心对象就是xmlHttpRequest
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
(一)方法

xmlHttpRequst对象利用send()和open()方法与服务器进行交互。
open(method,url,async)
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)
string:仅用于 POST 请求
如果是post请求,必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

(二)属性
(1)readyState
       0: 请求未初始化
       1: 服务器连接已建立
       2: 请求已接收
       3: 请求处理中
       4: 请求已完成,且响应已就绪

(2)State

200: "OK"
      404: 未找到页面
(3)responseText
      获得字符串形式的响应数据。
(4)responseXML
     获得 XML 形式的响应数据。
(5)onreadystatechange
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

三:Ajax运行原理

ajax通过xmlhttpRequest对象执行操作,其中xmlhttpRequest对象是在浏览器中内置的一个对象其运行原理就相当于创建了一个请求代理,通过代理去完成与服务器的交互,交互的过程中客户不需要等待,还可以进行其它的工作,交互完成以后,代理再将交互的结果返回给客户页面。

第一步:创建xmlHttpRequest对象,每个浏览器的创建不是都相同。

var xmlhttp;
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari创建方式
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 创建方式
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

通常情况下为了兼容所有浏览器,每个都要写上。

第二步:设置open()方法和setRequestHeader()方法参数。

将请求方式,请求目的地址,和请求类型设置到open方法中,如果是post请求,则需要设置setRequestHeader()参数

第三步:发送执行
利用send方法,与服务器真正的交互执行

第四步:获得执行结果

首先判断执行是否完成,然后将返回的responseText返回到页面

xmlhttp.onreadystatechange=function()
{
//判断是否发送成功,是否找到请求页面等
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//操作页面元素
return xmlhttp.responseText;
}
}

 四 同步和异步

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

xmlhttp.open("GET","ajax_test.html",true);

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理
Async=true

当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
实例

xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
Async = false

如需使用 async=false,请将 open() 方法中的第三个参数改为 false:
xmlhttp.open("GET","test1.txt",false);
我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
注意:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

五  onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性:

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange=function()  {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}

回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
实例

function myFunction(){
loadXMLDoc("/try/ajax/ajax_info.txt",function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}

参考资料:《JavaSript高级程序设计》

http://www.cnblogs.com/aksir/p/6857342.html

JavaScript初探系列之Ajax应用的更多相关文章

  1. JavaScript初探系列目录

    一  系列导航 结合各方面的参考资料,整理出来以下主要目录,供方便浏览查看 (一)初探系列           JavaScript初探系列(1)——基本概念 JavaScript初探系列(2)——数 ...

  2. JavaScript初探系列之面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  3. JavaScript初探系列之基本概念

    JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript(ECMA, EuropeanComputer Manufacturers Association )的伪语言的形式来 ...

  4. JavaScript初探系列之数组的基本操作

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只 ...

  5. JavaScript初探系列之String的基本操作

    1.字符串转换 字符串转换是最基础的要求和工作,你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种: var myStr = num.toString(); // "19& ...

  6. JavaScript初探系列(十)——Event

    一.绑定事件的两种方式 (一).方式一:onclick 举例: <body> <button>点我</button> <script> var btn ...

  7. JavaScript初探系列(十一)——ES6

    一.前言 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目标,是使得 JavaScript 语言可以用来编写复 ...

  8. JavaScript初探系列(九)——BOM

    一.什么是BOM? BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的.可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的 ...

  9. JavaScript初探系列(六)——函数

    一.概述 (一)函数的声明 JavaScript 有三种声明函数的方法. (1)function 命令 function命令声明的代码区块,就是一个函数.function命令后面是函数名,函数名后面是 ...

随机推荐

  1. MySQL---下载安装、数据库基本操作

    1.下载安装 1.1 下载:  http://dev.mysql.com/downloads/mysql/ 1.2 解压 1.3 初始化 cd c:\mysql-5.7.16-winx64\bin ( ...

  2. vue 项目 切换手机端和pc端。同一个项目,配置不同的路由

    1, 首先判断设备:在main.js里面写 // vue原型挂载 - 是否PC端 if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator. ...

  3. 关于org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z报错

    之前一直出现这个错误,使用的开发工具是IDEA 我感觉似乎是hadoop与windows的操作系统不太适合 于是在project创建 org.apache.hadoop.io.nativeio包,将N ...

  4. 『Python基础-3』变量、定义变量、变量类型、关键字Python基础-3』变量、定义变量、变量类型、关键字

    『Python基础-3』变量.定义变量.变量类型.关键字 目录: 1.Python变量.变量的命名 2.变量的类型(Python数据类型) 3.Python关键字 1. Python 变量.变量的命名 ...

  5. 清华大学《C++语言程序设计进阶》线上课程笔记06---继承、派生、多态性

    类的继承 保持已有类的特性而构造新类的过程称为继承; 实现设计与代码的重用. 在已有类的基础上新增自己的特性而产生新类的过程称为派生 当新的问题出现,原有程序无法解决(或不能完全解决)时,需要对原有程 ...

  6. C语言变量的初始化

    关于C语言变量是否需要初始化的问题.以前西北工业大学的C语言老师说的是,需要初始化,如果不初始化就使用的话,变量的值是以前遗留在内存中的,是不确定的(这只是针对局部变量的).C语言全局变量如果没有初始 ...

  7. C# 使用cmd

    public static string cmd(String command) //向cmd()传入命令行,传入"exit"则退出cmd.exe. { Process p = n ...

  8. 成都Uber优步司机奖励政策(2月25日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. 南京Uber优步司机奖励政策(12月28日到1月3日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. day 2 飞机大战原理

    1. 程序的图片的坐标 (左上角为顶点) 2.图片变成动态的 3.集成显卡 和独立显卡