javascript-XMLHttpRequest
JS方法:
var xmlhttp;//一定注意是写在外面的全局变量,我调了一个上午才发现。 function verify(){
//使用dom方式获取文本框中的值
var userName=document.getElementById("userName").value;
//以下5个步骤即完成ajax应用的5个关键步骤
//1. 创建XMLHttpRequest对象(最关键&复杂的一步)
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同代码
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();//针对mozillar,firefox,opera,safari,ie7,ie8
//针对某些特定版本的mozillar浏览器的bug(主要是调用回调函数时会有问题)进行修正(这一步是保证脚本的健壮性)
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActionXObject){
//(老师语)为什么这个放在第二个if语句里呢?
//(1)针对的对象范围太窄
//(2)自身的缺陷或者说原理已被一些人摸透了,有人利用ActionXObject干了不少坏事(?)所以会被一些有经验的用户直接禁掉
//针对ie6,ie5.5,ie5
//两个可以创建XMLHttpRequest对象的控件名称,保存在一个js数组中,排在前面的较新
varactivexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activexName.length; i++){
try{
xmlhttp=new ActionXObject(activexName[i]);
break;
}catch(e){
}
} }
//确认XMLHttpRequest对象创建成功(保证脚本的完整性,指开发的时候)
if(!xmlhttp){
alert("XMLHttpRequest对象创建视频!!");
return;
}else{
alert(xmlhttp);
}
//2. 注册回调函数
//只用函数名,不加括号,是因为该句只是把回调函数名注册给xmlhttp.onreadystatechange
//如果加了括号,则是调用函数,然后把该函数的返回值注册了。
//xmlhttp状态每次改变都会重新调用callback方法
xmlhttp.onreadystatechange=callback;
//3. 利用open方法设置与服务器的连接信息
xmlhttp.open("GET","AjaxServer?name="+userName,true);//Post方法请自行google百度
//还可以用Post方法进行传送,//xmlhttp.open(“POST”,”AjaxServer”,true)
//xmlhttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)
//4. 发送数据,开始和服务端进行交互
//之所以send(null)是因为第3步中,数据信息都在url里了,如果是Post方法,send(具体数据)
//如xmlhttp.send(“name”+userName);
//第3步中最后一个参数如果false,则运行到该句中止,一直等到数据返回;为true则代码继续运行
xmlhttp.send(null);
}
function callback(){
//5. 接收响应数据(在回调函数中针对不同响应状态进行处理)
//判断对象的状态是交互完成的
if(xmlhttp.readyState==4){
//0=未初始化,对象以创建,未调用open
//1=open方法调用成功,send方法未调用
//2=send方法已调用,未开始接收数据
//3=正在接收数据,HTTP响应头信息已经接收,数据尚未接收完成
//4=完成
//判断http的交互是否成功
if(xmlhttp.status==200){//关于xmlhttp.status请自行google百度
//获取服务器端返回数据
varresponseText=xmlhttp.responseText; //纯文本方式,关于其他方式请自行google百度
//将数据显示在页面上
//(1)通过Dom方式找到div标签对应的元素节点
vardivNode=document.getElementById("result");
//(2)设置元素节点中的html内容
divfNode.innerHTML=responseText;
}else{//出错信息}
}
} //这里有一个问题 就是 xmlhttp.open("GET","AjaxServer?name="+userName,true); 中的 AjaxServer 对于IE来说
//有些问题,交不到 想要的Servlet中去时,可以在后面加 ?type=nihao 什么的
//例:xmlhttp.open("GET","/myBoKe/PingLunController",true); 这个不能到PingLunController.java中,调到了主要的servlet中去了。 可能是我用了Iframe标签的 应该注意一下
// xmlhttp.open("GET","/myBoKe/PingLunController?type=in hao",true); 这样就可以了,很奇怪的
javascript-XMLHttpRequest的更多相关文章
- How to get blob data using javascript XmlHttpRequest by sync
Tested: Firefox 33+ OK Chrome 38+ OK IE 6 -- IE 10 Failed Thanks to 阮一峰's blog: http://www.ruanyifen ...
- javascript XMLHttpRequest对象全面剖析
转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...
- [javascript]XMLHttpRequest GET/SET HTTP头与改变HTTP METHOD示例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript——XMLHttpRequest 家族
https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arrayb ...
- [JavaScript] XMLHttpRequest记录
XMLHttpRequest 使用 XMLHttpRequest 对象可以和服务器进行交互,可以获取到数据,而无需让整个页面进行刷新.这样 web 页面可以做到只更新局部页面,降低了对用户操作的影响. ...
- [Javascript]XMLHttpRequest对象实现下载进度条
摘要 可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&q ...
- javascript XMLHttpRequest 对象的open() 方法参数说明
下文是从w3c上摘录下来的,其中参数 method 说明的很简短,不是很理解,所以又找了些资料作为补充.文中带括号部分. XMLHttpRequest.open() 初始化 HTTP 请求参数 语法o ...
- javascript AJAX简单原理及什么是ajax
AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...
- 06XML JavaScript
1. XML JavaScript XMLHttpRequest 对象 XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法.
- comp.lang.javascript FAQ [zz]
comp.lang.javascript FAQ Version 32.2, Updated 2010-10-08, by Garrett Smith FAQ Notes 1 Meta-FAQ met ...
随机推荐
- 使用Android Studio搭建Android集成开发环境(图文教程)
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- [Unity2D]2D Mobile Joystick
效果预览 操作步骤 1.下载素材 http://pan.bai du.com/s/1gdkQz8v 2.新建一个GUITexture(Joystick)及一个Sprite(Nyan) 3.添加背景 ...
- -bash: wget: command not found的两种解决方法
今天给服务器安装新环境时,wget 时提示 -bash:wget command not found,很明显没有安装wget软件包.一般linux最小化安装时,wget不会默认被安装,这里是CentO ...
- 给H5页面添加百分比的进度条,精确度高
进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9 原理:由于H ...
- S2--《优化MySchool数据库设计》总结
第一章 数据库的设计 1.1 数据库设计 数据库中创建的数据库结构的种类,以及在数据实体之间建立的复杂关系是决定数据库系统效率的重要因素. 糟糕的数据库设计表现在以下两个方面: *效率低下 * ...
- mybatis-config.xml详解
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC ...
- redmine Windows装配
原文:http://www.myexception.cn/windows/1219064.html redmine Windows安装 官方地址:http://www.redmine.org/ 所需环 ...
- KeyBord事件分发和接收简要过程代码示例
step1:调用ViewRootImpl的内部类ImeInputStage的成员函数onProcess来判断输入法是否处于激活状态 final class ImeInputStage extends ...
- Kakfa分布式集群搭建
本位以最新版本kafka_2.11-0.10.1.0版本讲述分布式kafka集群环境的搭建过程.服务器列表: 172.31.10.1 172.31.10.2 172.31.10.3 1.下载kafka ...
- Web 服务编程,REST 与 SOAP(转)
原文地址:Web 服务编程,REST 与 SOAP REST 简介 在开始我们的正式讨论之前,让我们简单看一下 REST 的定义. REST(Representational State Transf ...