Ajax异步交互 [异步对象连接服务器]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XMLHttpRequest</title>
<script>
var xmlHttp; //声明一个全局变量xmlHttp,主要是考虑到异步对象在整个页面进程中都有可能使用到。
function createXMLHttpRequest(){ //创建一个异步对象的函数,
if(window.ActiveXObject) //该函数主要利用if语句进行浏览器的判断,如果是IE浏览器则采用ActiveXObject的创建方法,如果不是则直接利用XMLHttpRequest()函数,考虑兼容性,因此需要对浏览器进行判断,这基本是Ajax创建异步对象的通用方法。
xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}
function startRequest(){
createXMLHttpRequest(); //调用已经写好的函数,创建一个异步对象
xmlHttp.open('GET','new_file.xml',true); //建立一个到服务器的请求, true是异步请求,open(method,url,asynchronous,user,password),asynchronous是一个布尔值,表示是否为异步请求,默认为异步请求true。user、password分别为可选的用户名、密码。
xmlHttp.onreadystatechange=function(){ //readystate属性判断目前请求的状态,如果该属性变化了,就会触发onreadystatechange事件。
if(xmlHttp.readyState==4 && xmlHttp.status==200) //如果readyState的状态为4(数据接收成功)则继续操作。并且一般情况下还要判断服务器返回的响应状态status。
alert('服务器返回:'+xmlHttp.responseText);
}
xmlHttp.send(null); //将该请求发送给服务器。send(body); 参数body,它表示要向服务器发送的数据,其格式为查询字符串的形式,例如:var body="myName=isaac&age=25";
}
</script>
</head>
<body>
<input type="button" value="测试异步通信" onclick="startRequest()" />
</body>
</html>
注意:
如果使用POST方法进行提交请求,那么在发送前必须使用如下的语句来设置HTTP的头,语法如下:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var queryString = "firstName=isaac&birthday=0624";
var url="9-3.aspx?timestamp="+new Date().getTime();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString); //该语句负责发送数据
2,解决异步连接服务器时IE的缓存问题
var sUrl="9-1.aspx?" + new Date().getTime(); //地址不断的变化
xmlHttp.open("GET", sUrl, true);
Ajax异步交互 [异步对象连接服务器]的更多相关文章
- 实现AJAX的异步交互的步骤
<input type="button" value="异步请求"id="btn"> <script> 实现ajax ...
- AJAX 异步交互基本总结
AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...
- Ajax异步交互基础
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
- 原生Ajax实现异步交互
实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...
- spring mvc 和ajax异步交互完整实例
Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 使用AJAX技术发送异步请求,HTTP服务端推送
使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...
- Ajax同步与异步优缺点与使用
一.什么是同步请求:(false) 同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能 ...
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
随机推荐
- C语言学习(记录)【内存相关_1:内存基础】
本学习是基于嵌入式的C语言学习记录(课程内容来源于某位老师的网络课程,为了证明不是在打广告,就不写出老师的名字了,感谢.) -------------------------------------- ...
- 在mac OS10.10下安装 cocoapods遇到的一些问题
今天有个朋友问了我一个问题:为什么我安装cocoapods不成功,报 sh: line 1: 997 Abort trap: 6 /Applications/Xcode.app/Contents/De ...
- C++中的endl
从开始接触C++到现在,一直以为语句 cout << "hello world!" << endl; 中的endl只是一个相当于C中的换行'\n':直到今天 ...
- Java反射机制能够获取的信息,与应用
一.什么是Java反射机制? [1]反射机制是在运行状态中,对于任何一个类,都能够知道这个类的所有属性和方法: [2]对于任意一个对象,都能够调用它的任意一个属性和方法: 像这种动态获取类的信息以及动 ...
- 《Spark Python API 官方文档中文版》 之 pyspark.sql (一)
摘要:在Spark开发中,由于需要用Python实现,发现API与Scala的略有不同,而Python API的中文资料相对很少.每次去查英文版API的说明相对比较慢,还是中文版比较容易get到所需, ...
- Unity 游戏框架搭建 (七) 减少加班利器-QApp类
本来这周想介绍一些框架中自认为比较好用的小工具的,但是发现很多小工具都依赖一个类----App. App类的职责: 1.接收Unity的生命周期事件. 2.做为游戏的入口. 3.一些框架级别的组件初始 ...
- 【转载】XSS学习笔记
XSS的分类 非持久型 非持久型XSS也称反射型XSS.具体原理就是当用户提交一段代码的时候,服务端会马上返回页面的执行结果.那么当攻击者让被攻击者提交一个伪装好的带有恶意代码的链接时,服务端也会立刻 ...
- css-子div设置margin-top影响父div
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素,祖先元素,所有需要在父元素设置border,或者padding
- JavaScript正则表达式知识点
通过学习imooc课程<JavaScript正则表达式>http://www.imooc.com/video/12539,对视频教学内容做一个知识整理. 一个正则表达式在线工具:http: ...
- js函数整合队列顺序执行插件
前言 在日常开发中,也许我们会遇到这样的一个问题.我们利用[发布订阅模式](如果不了解的可以直接访问此链接www.cnblogs.com/xiaoxiaokun- )去执行[发布]事件时,遇到函数内部 ...