文档章节

Ajax学习体验之一

飞雪无痕
 飞雪无痕
发布于 2016/04/16 14:55
字数 864
阅读 87
收藏 4

在没有使用Ajax之前,总觉得Ajax很神秘,局部刷新、与服务器通信等,知道学习了Ajax之后,了解了Ajax语法之后,知道了其语法相当精简,扼要。下面就来说一说Ajax的精妙

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

XMLHttpRequest是Ajax的基础

现在大部分浏览器均支持XMLHttpRequest对象(部分IE5 、IE6使用ActiveXObject)

XMLHttpRequest用于在后台与服务器的数据交换,在不重新加载整个网页的情况下,对网页的部分内容进行加载


在调用Ajax时,需要先创建XMLHttpRequest对象

    variable = new XMLHttpRequest();

而在老版本的IE中使用该Acticex对象

    variable = new ActiveXobject(“Microsoft.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");
  }

向服务器发送请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method:请求的类型;GET 或 POST
  • url:文件在服务器上的位置
  • async:true(异步)或 false(同步)
send(string)

将请求发送到服务器。

  • string:仅用于 POST 请求

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
具体参见:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp


常用的情况是:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
上面的例子,可能会读取到缓存结果,为了避免这种情况,可以向URL中添加一个唯一的ID

xmlhttp.open("GET","demo_get.asp?t=" +Math.random(),true);
xmlhttp.send();

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

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

200: "OK"

404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

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

函数回调 callback(),具体参考例子:


<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/ajax/test1.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}
</script>
</head>
<body>


<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>


</body>
</html>

© 著作权归作者所有

飞雪无痕
粉丝 3
博文 66
码字总数 21854
作品 0
大兴
高级程序员
私信 提问
Ajax & PHP 边学边练 之一 Ajax基础

Ajax其实已经使用很久了,但一直也没有时间正经的找本书系统看看,最近时间比较充裕可以好好补习一下了。本系列是基于Ajax和PHP结合进行讲解,主要是想和正在学习或想要学习Ajax的朋友分享下...

junwong
2012/03/09
388
1
asp.net的Ajax学习进阶

asp.net的Ajax学习进阶 作者:清清月儿 主页:http://blog.csdn.net/21aspnet/ 时间:2007.6.3 1.什么是Ajax? 2006年忽如一夜春风来,众多涉及到Web开发的站点都在谈Ajax,那么到底什么是Aja...

晨曦之光
2012/03/09
146
0
UI开发工具Telerik UI for ASP.NET AJAX发布R2 2018 SP1|附下载

Telerik的UI for ASP.NET AJAX拥有构建ASP.NET AJAX和SharePoint应用程序的80+控件,将为任何浏览器和设备构建Web Forms应用程序的时间缩短一半。Telerik UI for ASP.NET AJAX是完整的 ASP....

Miss_Hello_World
2018/09/28
0
0
React构建单页应用方法与实例

React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM、JSX等。那么接下来我们就来学习...

王春-海子
2016/08/09
26
0
History API 与 Hashbang 的对比

智能状态处理 哈希bang(#!),哈希(#),甚至HTML5的历史API(pushState,popState)都有一些问题。这篇文章将一一谈及这些问题,包括它们的用例,然后会提到问题解决方案的进化史。只要一...

kenzone
2013/10/31
4.1K
2

没有更多内容

加载失败,请刷新页面

加载更多

HTTP协议无状态,到底要怎么理解?

一,故事 一天,你有个需求,你要去超市买一瓶酱油。 到了超市买了酱油,你告诉售货员,下次给我准备下面粉,我下次来拿。 第二次,你去超市拿面粉,售货员说他不记得你什么时候说要准备面粉...

一代码农码一代
30分钟前
1
0
elk 邮件预警

{ "trigger": { "schedule": { "cron": "0/15 1 * * * ?" } }, "input": { "search": { "request": { "search_type": "query_then_fetch", "indices": [ "heartbeat*" ], "rest_total_hits_a......

internetafei
42分钟前
1
0
从一道面试题谈linux下fork的运行机制

今天一位朋友去一个不错的外企面试linux开发职位,面试官出了一个如下的题目: 给出如下C程序,在linux下使用gcc编译: #include "stdio.h" #include "sys/types.h" #include "unistd.h" in......

linux服务器架构
45分钟前
1
0
AEDPoS合约实现之GetConsensusCommand

正如文章AElf共识合约标准中所述,GetConsensusCommand接口用于获取某个公钥下一次生产区块的时间等信息。 在AEDPoS的实现中,其输入仅为一个公钥(public key),该接口实现方法的调用时间另...

AELF开发者社区
52分钟前
0
0
kotlin中奖概率

fun main() { var wins = 0 var chance = 0.2 var playTime = 10// 1000万次 val n = 10000000 (1..n).forEach { if (play(chance, playTime)) win......

oschina4cyy
55分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部