记录下最原始的xmlHttp
来源:互联网 发布:深圳迈瑞工资待遇知乎 编辑:程序博客网 时间:2024/04/30 11:55
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
首先说明XMLHTTP是用来模拟发起浏览器的post和get请求的一个浏览器内置对象,
先搞清楚几个问题:
1.既然是浏览器对象:那么我们如何获得这个对象:
2.为什么要用这个对象
下面开始解答:
问题1:获取XMLHTTP对象:
由于浏览器不同,所用获取方式也不同,下面给出通用的获取对象代码:
var xmlhttp;
//创建XMLHTTPRequest对象
//找是 XMLHTTPRequest对象使用中最复杂的一步
if(window.XMLHttpRequest){//针对FireFox,Mozillar,Opera,Safari,IE7,ie8
xmlhttp=new XMLHttpRequest();
//针对某些特定 版本的mozillar浏览器的bug进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
var activeName=new ActiveXObject["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
//取出一个控件名进行创建,如果创建成功就终止循环
xmlhttp=new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
//确认XMLHTTPRequest是否创建成功
if(!xmlhttp){
// alert();
return;
}else{
// alert(xmlhttp);
}
xmlhttp.onreadystatechange=callback;
//3.设置连接信息 true表示采用同步还是异步方式交换 true表示异步
xmlhttp.open("GET",url,false);
//4.发送数据,开始和服务器端进行交互
//同步方式下,send这句话会在服务器端数据回来后才执行完
//异步方式下send会立即完成执行
xmlhttp.send(null);
}
问题2:为什么使用该对象
因为该对象有默认的回调方法:onreadystatechange
我们可以通过xmlhttp.readyState获的该请求的完成状态,和结果属性,这里就可以写入自己想要执行的代码,来做一些处理,比如,在请求没有完成前给出等待提示
下面看代码:
function callback(){
//5.接收相应数据
//判断对象的状态是交互完成
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200){
// alert('交互成功!!!关闭gif图片');
//获取服务器 端返回的数据
//获取服务器端输出的纯文本的数据
var responseText=xmlhttp.responseText;
alert(responseText);
// 将数据显示在页面上
// document.getElementById("resultMess").innerHTML=responseText;
}
}else{
// alert('提示进度条gif');
}
}
相应的servlet后台返回文本数据可以了。response.getWirter().wirte("ssssssssssssssssss");
xmlhttp.open("GET","test1.txt",true);xmlhttp.send();
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET 请求
一个简单的 GET 请求:
xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.open("GET","demo_get.asp?t=" + Math.random()
,true);xmlhttp.send();
POST 请求
一个简单 POST 请求:
xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();
如果需要像 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");
url - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址:
xmlhttp.open("GET","ajax_test.asp",true);
该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,
比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。
服务器响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
虽然这次项目中没用到,不过觉得这个东西还是挺好的,就记录下,尽管现在有了ajax,但是这个才是原生的东西!
- 记录下最原始的xmlHttp
- 最原始的AJAX
- J2EE下使用AJAX(一) 最原始的AJAX
- J2EE下使用AJAX(一) 最原始的AJAX
- J2EE下使用AJAX(一) 最原始的AJAX .
- 最原始的多线程简介
- 最原始的J2EE工程
- 图书管理系统_jdbc连接下基于servlet的最原始的javaWeb项目
- MySQL 解密 --> 如何查看二进制日志ROW模式下最原始的SQL语句
- mysql数据库连接的最原始的方式
- 最原始的分页存储过程
- objective-c sqlite3 最原始的使用
- Uploadify上传和最原始的下载
- 第一类贪心,最原始的处理。
- 定时任务(2)--最原始的实现
- 最原始的CD转换mp3。
- 最原始的ajax无刷新分页
- 用最原始最易懂的方法建立二叉树
- 模板 虚函数
- MINA2.0用户手册中文版--第七章 MINA中的处理程序Handler
- 从零开始学WCF(2)设计和实现服务协定
- REST架构风格的理解(分布式应用系统的架构演变)
- cocos2d iOS7 彻底隐藏 status bar
- 记录下最原始的xmlHttp
- jquery easyui easyloader加载外部js文件失败问题解决
- sqlserver获取日期时间
- MINA2.0用户手册中文版--第六章 MINA中的传输 第一节 基于APR的传输
- iOS UIPageControl使用
- 彻底删除mysql
- vim保存退出提示can't open file for writing
- MINA2.0用户手册中文版--第六章 MINA中的传输 第二节 基于串行传输
- Linux串口编程