文档章节

初识Ajax

reid3290
 reid3290
发布于 2014/12/09 21:16
字数 586
阅读 9
收藏 0

1  创建XMLHttpRequest对象:所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

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 向服务器发送请求

xmlhttp.open(method, url, async) 规定请求的类型、URL 以及是否异步处理请求。
xmlhttp.send(string) 将请求发送到服务器。

url:服务器上的文件地址,该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

async:XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true。当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。

method: POST or GET

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:

        1)无法使用缓存文件(更新服务器上的文件或数据库)

        2)向服务器发送大量数据(POST 没有数据量限制)

        3)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    使用GET方法时,应将要发往服务器的信息添加在url中

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

    而用POST方法时,则要设置HTTP头

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

3 获取服务器响应数据

如需获得来自服务器的响应,应使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 属性返回字符串形式的响应:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 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;

4 onreadystatechange事件

XMLHttpRequest对象的readyState 属性存有 XMLHttpRequest 的状态信息(0:请求未初始化,1:连接已建立,2:请求已接收,3:请求处理中,4:请求处理完毕,且响应已就绪),每当 readyState 改变时,就会触发 onreadystatechange 事件。onreadystatechange属性的值是一个自定义的函数,用于时间控制。

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



© 著作权归作者所有

reid3290
粉丝 2
博文 64
码字总数 15933
作品 0
闵行
程序员
私信 提问
初识react(四) react中异步解决方案之 redux-saga

回顾 初识react(一) 揭开jsx语法和虚拟DOM面纱 初识react(二) 实现一个简版的html+redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 今天demo是实现一个异步的计算器,探究...

言sir
2018/09/19
0
0
javascript-ajax基础

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(特点:1...

悠哈121
2018/07/23
0
0
初识Comet技术

初识Comet技术一、服务器推送技术概述服务器推送技术(Servers Push)的基础思想是将浏览器主动查询信息改为服务器主动发送信息。服务器发送一批数据,浏览器显示这些数据,同时保证与服务器的...

Airship
2016/10/31
19
1
初识websocket

前言:工作中在验证前端页面展示数据时,接触到websocket这一概念,这里粗略记录下关于websocket的理解和常用方式。 (1)什么是websocket? 命名:看起来好像和socket有某种关系,但是根据查...

在你的世界路过
2017/12/08
0
0
Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String

Firefox给出的错误 Ext.Error: Unable to parse the JSON returned by the server: You're trying to decode an invalid JSON String: articlelist.jsp {"results":"100","rows":[{"id":"1"......

anonymous_007
2014/05/28
2.2K
2

没有更多内容

加载失败,请刷新页面

加载更多

jenkins定时构建时间设置

举几个例子: 每隔5分钟构建一次 H/5 * * * * 每两小时构建一次 H H/2 * * * 每天中午12点定时构建一次 H 12 * * * 每天下午18点定时构建一次 H 18 * * * 在每个小时的前半个小时内的每10分钟...

shzwork
26分钟前
1
0
Myeclipse 问题记录

1. 创建maven聚合(pom) 工程 ,子项目会带上 maven app这些文字,删掉后会导致工程文件在working set里消失,解决办法:右键子项目 import as project 解决问题。...

无敌小学僧
54分钟前
1
0
《Chez Scheme初探》定义变量、递归、测试性能、并列代码编写

普通fib函数 (define (fact n) (if (= n 1) 1 (* n (fact (- n 1)) ) )) 尾递归fib函数 (define (fact-tail n) (fact-rec n n))(defi......

flash胜龙
54分钟前
1
0
任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击!

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击! 如果你是华为的老板,看到一条传遍网络的“美国封锁华为”、“华为禁令”的消息,你会怎么办? 昨天上午,华为创始...

forespider
今天
3
0
Java HTTP 组件库选型看这篇就够了

最近项目需要使用 Java 重度调用 HTTP API 接口,于是想着封装一个团队公用的 HTTP client lib. 这个库需要支持以下特性: 连接池管理,包括连接创建和超时、空闲连接数控制、每个 host 的连...

Java面经
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部