学无止境,学习AJAX(二)
POST 请求
一个简单 POST 请求:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
带参数:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
方法 | 描述 |
---|---|
setRequestHeader(header,value) |
向请求添加 HTTP 头。
|
open() 方法的 url 参数是服务器上文件的地址:
xmlhttp.open("GET","ajax_test.asp",true);
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
异步 - True 或 False?
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xmlhttp.open("GET","ajax_test.asp",true);
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
个人认为
Async = false
不是必要的话就不要用!!!
因为如果服务器繁忙或者网络慢,这个时候我们的应用会直接挂死,无响应。
服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
responseText 属性
如果来自服务器的响应并非 XML,请使用 responseText 属性。
responseText 属性返回字符串形式的响应,因此您可以这样使用:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML 属性
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
请求 books.xml 文件,并解析响应:
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;
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status |
200: "OK" 404: 未找到页面 |
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
当readyState=4, status=200时,这个时候表示处理完成,且状态OK。
学了半天,咱也写个测试以下学习效果呗~ 测试很简单,你输入0-9后,文本框下方自动显示对应的中文数字。(零...玖)
<script type="text/javascript">
function covtochs(str)
{
var xmlhttp;
//如果用户输入长度为0,就清空显示。
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
//创建对象
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//处理ONREADYSTATECHANGE事件,我们这里只相应服务器反馈成功的
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","covto.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body> <h1>请输入框中输入入数字(0-9)</h1>
<form action="">
姓氏:<input type="text" id="txt1" onkeyup="covtochs(this.value)" />
</form>
<p>服务器反馈信息:<span id="txtHint"></span></p>
服务器上的文件内容:
covto.asp
<%
response.expires=-1
'获取用户输入
sUserInput=request.querystring("q") select case sUserInput
case "0"
sResult="零"
case "1"
sResult="壹"
case "2"
sResult="贰"
case "3"
sResult="叁"
case "4"
sResult="肆"
case "5"
sResult="伍"
case "6"
sResult="陆"
case "7"
sResult="柒"
case "8"
sResult="捌"
case "9"
sResult="玖"
case else
sResult=""
end select if hint="" then
response.write("?")
else
response.write(sResult)
end if
%>
测试一下呗,挺简单的吧。
学无止境,学习AJAX(二)的更多相关文章
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- 学无止境,学习AJAX,跨域(三)
学习AJAX其实有个很重要的应用,就是为了执行另外几个站点的ASP,返回结果. 真正用起来,发现2个问题,>_> 不许笑,一向做DELPHI,接触ASP不多的我,的确问题大堆. 第一个问题 ...
- [转]ASP.NET MVC学习系列(二)-WebAPI请求 传参
[转]ASP.NET MVC学习系列(二)-WebAPI请求 传参 本文转自:http://www.cnblogs.com/babycool/p/3922738.html ASP.NET MVC学习系 ...
- crawler4j 学习(二)
crawler4j 学习(二) 实现控制器类以制定抓取的种子(seed).中间数据存储的文件夹.并发线程的数目: public class Controller { public static voi ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- Android Animation学习(二) ApiDemos解析:基本Animators使用
Android Animation学习(二) ApiDemos解析:基本Animatiors使用 Animator类提供了创建动画的基本结构,但是一般使用的是它的子类: ValueAnimator.O ...
- AspectJ基础学习之二搭建环境(转载)
AspectJ基础学习之二搭建环境(转载) 一.下载Aspectj以及AJDT 上一章已经列出了他的官方网站,自己上去download吧.AJDT是一个eclipse插件,开发aspectj必装,他可 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- MyBatis学习系列二——增删改查
目录 MyBatis学习系列一之环境搭建 MyBatis学习系列二——增删改查 MyBatis学习系列三——结合Spring 数据库的经典操作:增删改查. 在这一章我们主要说明一下简单的查询和增删改, ...
- MyBatis学习 之 二、SQL语句映射文件(2)增删改查、参数、缓存
目录(?)[-] 二SQL语句映射文件2增删改查参数缓存 select insert updatedelete sql parameters 基本类型参数 Java实体类型参数 Map参数 多参数的实 ...
随机推荐
- 多线程GCD
经常使用:规避很多线程相关的复杂的逻辑 为什么会gcd?因为pthread和nsthread要求开发人员对线程相关的知识了解深入; 手动启动线程:加锁/解锁;造成很多隐患 --> 苹果公司给出了 ...
- [转]ORACLE 异常错误处理
本文转自:http://www.cnblogs.com/soundcode/archive/2012/01/10/2318385.html 本篇主要内容如下: 5.1 异常处理概念 5.1.1 预定义 ...
- 读jQuery官方文档:$(document).ready()与避免冲突
$(document).ready() 通常你想在DOM结构加载完毕之后才执行相关脚本.使用原生JavaScript,你可能调用window.onload = function() { ... }, ...
- 面试相关的技术问题--WEB基础
1. servlet生命周期.各个方法 和工作原理servlet的生命周期包括三个阶段,分别是:初始化阶段:调用init()方法(整个生命周期内只被调用一次)响应客户端请求阶段:service()终止 ...
- Android通过tcpdump抓包(wifi, 2g, 3g都可以)
http://blog.csdn.net/deng529828/article/details/20646197 1. 手机要有root权限 2. 下载tcpdump http://www.str ...
- mysql关键字讲解(join 、order by、group by、having、distinct)
1.join 1.1 OUTER JOIN:想要包含右侧表中的所有行,以及左侧表中有匹配记录的行. 1.11 Mysql中有左连接(left join): ...
- Xcode中,调试console窗口输出error: Couldn't materialize struct: the variable 'cell' has no location, it may have been optimized out的问题
Xcode中调试代码时,常常需要使用console窗口查看变量的信息,比如使用了如下的命令来输出有关UITableView中一个UITableViewCell的信息, po cell 令人感到意外的是 ...
- gradle使用国内源
// 设置 maven 库地址 repositories { maven { url 'http://maven.oschina.net/content/groups/public/' } } ...
- CSU-ACM2016暑期集训训练4-BFS(F - Oil Deposits)
F - Oil Deposits Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u De ...
- 实习笔记-3:ef实体操作错误篇
学习笔记 1.json序列化ef实体是报错:“序列化类型为“System.Data.Entity.DynamicProxies.XXXX.... 对象时检测到循环引用.” 公司里用ef来生成实体.但是 ...