一、AJAX概述

AJAX是Asynchronous JavaScript and XML的缩写。中文译作异步JavaScript和XML。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。在不又一次载入页面的情况下,与server交换数据并更新部分网页的艺术。

其核心是:client的Javascript可以与webserver进行异步数据交换。

二、AJAX基础---XMLHttpRequest对象

全部现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。XMLHttpRequest 用于在后台与server交换数据。这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新。

1、创建 XMLHttpRequest 对象的语法:

var obj1 = new XMLHttpRequest();。

IE5和IE6中。使用ActiveX对象:var obj2 = new ActiveXObject("Micorosoft.XMLHTTP");

能够用例如以下方式保持兼容:

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

2、XMLHttpRequest 对象的方法和属性

XMLHttpRequest 对象的方法和属性用来向server发送请求和从server获取响应。

2.1    发送请求:open()和send()

open()方法用于创建一个请求。创建的HTTP请求并未发送,直到调用send()方法才被发送

method不区分大写和小写。URL能够是绝对或者相对地址。async默觉得true,意味着并不会马上返回数据。string參数可选,用于定义发送请求的正文(最好用字符串格式,而且使用setRequestHeader()方法定义请求报头的内容内型及编码方式)。

2.2    
setRequestHeader():设置请求报头,将和请求一同发送到服务端

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

//假设须要像 HTML 表单那样 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");

2.3    abort():终止请求 。没有參数。

三、AJAX获取server响应

利用XMLHttpRequest对象和属性获取server的响应,包含HTTP报头和响应的正文。

1、xmlObj.getAllResponseHeaders():获取全部响应的报头,以字符串形式返回。每一个HTTP报头名称和值用冒号分隔。如myheader:myvalue,并以\r\n结束。

2、xmlObj.getResponseHeader(param):获取响应中某个特定的字段值。參数param是一个响应的HTPP字段名。

3、responseText和responseXML属性

均为仅仅读属性。用于返回server中响应的正文。

<span style="font-size:14px;">//responseText属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ////responseXML属性
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;</span>

4、status和statusText属性

均为仅仅读属性,用于推断响应状态。

status表示响应中的状态码。如404,200等,statusText表示状态文本信息。如OK,Not Found。状态码和文本信息一一相应,常见例如以下:

点击查看完整版。

这两个属性仅在send()方法发送数据并接收到server响应完成后才有效。

5、readyState属性

该属性表示HTTP请求的状态码,仅仅读,返回一个整数,其值和说明例如以下:

0 描写叙述一种"未初始化"状态;此时,已经创建一个xmlhttprequest对象,可是还没有初始化。 

         1 描写叙述一种"发送"状态;此时,代码已经调用了xmlhttprequest open()方法而且xmlhttprequest已经准备好把一个请求发送到server。 

         2 描写叙述一种"发送"状态;此时,已经通过send()方法把一个请求发送到server端,可是还没有收到一个响应。 

         3 描写叙述一种"正在接收"状态;此时,已经接收到http响应头部信息,可是消息体部分还没有全然接收结束。

4 描写叙述一种"已载入"状态;此时,响应已经被全然接收。

四、onreadystatechange 事件

readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时。就会触发 onreadystatechange 事件。

onreadystatechange属性能够指定一个函数,当状态改变就调用该函数。

函数常常与readyState/status/statusText属性确定响应的详细状态

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

五、解决请求被浏览器缓存的问题

在使用XMLHttpRequest时,要注意的一个问题是载入的内容可能被浏览器缓存。能够对URL參数作改动避免此问题。

经常用法是加上一个随机数作为查询參数。

<span style="color:#000000;">xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
<span style="font-family:SimSun;">//或者:xmlhttp.open("get","url"+(new Date()).getTime(),true);</span>
 xmlhttp.send();</span>

六、点击看实例

《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方式的更多相关文章

  1. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  2. JavaScript权威指南学习笔记6

    这两天主要翻看了书中的第18-22章,重点看了第17章:事件化处理,其它几章节主要是翻了下书知道有相关的概念,没有真正理解其中的内容,或者没有考虑究竟如何能把里面的内容应用到实际的项目中.说的讽刺一点 ...

  3. javascript权威指南学习笔记1

    打开这本书,进入到javascript的世界.以前都是看各种视频,感觉什么收获也没有,反而弄得脑袋混乱,希望能够按照这本书的节奏掌握javascript这门语言,为我的前端学习打下基础. 学习前准备: ...

  4. JavaScript权威指南学习笔记4

    今天看了第9.10.11章,感觉收获最大还是正则表达式那章节,不过这些不用太多脑子思考,问题用到了直接查书就可以了,下面分别总结一下: 第9章类和模块:分9节,前面8节都是在讲类相关的知识,最后一节讲 ...

  5. Javascript权威指南学习笔记

    第二章:词法结构 ;function a(){alert(2)};//前面的分号保证正确地语句解析 第三章:类型.值和变量 基本概念: 1.数据类型---能够表示并操作的值的类型叫做数据类型. 2.变 ...

  6. javascript权威指南学习笔记3

    今天看到第四章,记录一下其中的几个点,俗话说:好记性不如烂笔头嘛. 4.9   in运算符和instanceof运算符 in运算符希望它的左操作数是一个字符串或可以转化为字符串,希望它的右操作数是一个 ...

  7. javascript权威指南学习笔记2

    Javascript语言核心(2~12章) 第三章:类型.值.变量 1.数字: overflow(Infinity, -Infinity).underflow(+0,-0) 非数字值:它和任何值都不相 ...

  8. JavaScript权威指南学习笔记5

    下午在杭图回去前看了书中第二部分的13-17章,看的很粗,感觉大部分东西自己已经知道或者平时开发中不会用到,很多章节只是简单的翻了一下,没有仔细思考里面说到的道理,下面对各章节简单的记录下. 第13章 ...

  9. js权威指南学习笔记(二)表达式与运算符

    1.数组初始化表达式 数组直接量中的列表逗号之间的元素可以省略,这时省略的空位会填充undefined.如:       2 2           1 var arr = [1,,,,,6]; 2 ...

随机推荐

  1. 【C语言】复杂类型声明

    原文地址: http://blog.csdn.net/wangweixaut061/article/details/6549768 原文不让转载,但实在是有用,就拷贝了一小部分过来.全文请点开链接. ...

  2. Python模块学习:glob 文件路径查找

    glob模块是最简单的模块之一,内容非常少. 用它可以查找符合特定规则的文件路径名.跟使用windows下的文件搜索差不多. 查找文件只用到三个匹配符:”*”, “?”, “[]”. ”*”匹配0个或 ...

  3. TP5使用技巧

    1.fetchSql用于直接返回SQL而不是执行查询,适用于任何的CURD操作方法. 例如:$result = Db::table('think_user')->fetchSql(true)-& ...

  4. PHP面向对象知识点总结

    1.$this是什么 当前类实例化的对象 2.访问对象中的成员 对象->成员 3.构造方法 通常用来初始化对象的属性,不用把属性写死,不同的对象就有了不同的属性 4.get.set的用法 通常将 ...

  5. UVA 11324 The Largest Clique(缩点+DAG上的dp)

    求最大团.和等价性证明有类似之处,只不过这个不是求互推,而是只要a->b,或b->a即可. 同样的,容易想到先缩点,得到DAG,每个节点上保存SCC的点数,相信任意一条由根节点(入度为零) ...

  6. .net 实用功能

    c#的DateTime.Now函数详解 [C#]Color颜色对照表 Sql日期时间格式转换 关于asp.net中页面事件加载的先后顺序 asp.net在ie7中使用FileUpload上传前预览图片 ...

  7. 中矿新生赛 H 璐神看岛屿【BFS/DFS求联通块/连通块区域在边界则此连通块无效】

    时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言65536K64bit IO Format: %lld 题目描述 璐神现在有张n*m大小的地图,地图上标明了陆地(用 ...

  8. 测试工具APPScan安装与使用教程

  9. 【hdu3652】数位dp(浅尝ACM-A)

    向大佬学习 第一次写博客有点紧张,也算是小萌新的突破吧 这次主要是总结一下校内的ACM比赛的各种题,主要是新思路以及学到的新知识 先放一张 下面开始说正事 题面 A wqb-number, or B- ...

  10. Runtime对象

    Runtime简单概念: Runtime:每个 Java 应用程序都有一个 Runtime 类实例,使应用程序能够与其运行的环境相连接. * 这也是jvm实现跨平台的一个重要原因. * 可以通过 ge ...