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 ...
随机推荐
- Hadoop 1.0 和 2.0 中的数据处理框架 - MapReduce
1. MapReduce - 映射.化简编程模型 1.1 MapReduce 的概念 1.1.1 map 和 reduce 1.1.2 shufftle 和 排序 MapReduce 保证每个 red ...
- SharpDX之Direct2D教程II——加载位图文件和保存位图文件
本系列文章目录: SharpDX之Direct2D教程I——简单示例和Color(颜色) 绘制位图是绘制操作的不可缺少的一部分.在Direct2D中绘制位图,必须先利用WIC组件将位图加载到内存中,再 ...
- Docker与容器快速入门
Docker之风席卷全球,但很多人觉得docker入门确实不太容易,其原因在于很多知识点上没准备好,在docker解决了什么问题.怎么解决的.用什么技术解决的都还没想清楚的时候就去探索docker组件 ...
- disabled和readonly的区别?
在博客园中看到这样一篇文章,关于disabled和readonly的区别,以前还真的没有注意它们的区别,还是有必要知道它们的区别的,所以转载了. 这两个属性有类似之处,但是区别也是巨大的,之所以说类似 ...
- 2D Tookit (一) 精灵切割
Sprite Dicing 精灵切割 图一:原图 Diced 设置 Diced[切割]对比图 文档 http://www.2dtoolkit.com/docs/latest/advanced/sp ...
- Adobe Scout 使用参考说明
Adobe Scout 用于优化 Flash 内容,是一款极为强大的工具,因为它能让您看到 Flash Player 幕后正在发生的事情.但是若明白 Flash Player 为什么做这些事情,您看到 ...
- 学员信息录入(StuInfoManager) 用分层实现(既MySchool后的一个案例)
数据库 数据表名 Student 中文表名 学员信息表 字段显示 字段名 数据类型 字段大小 备注和说明 编号 stu_id int 主键,自增1 学生姓名 stu_name varchar 50 不 ...
- java 13-6 Char的包装类Character
1.Character 类在对象中包装一个基本类型 char 的值 此外,该类提供了几种方法,以确定字符的类别(小写字母,数字,等等),并将字符从大写转换成小写,反之亦然 构造方法: Characte ...
- Android 屏幕适配(二)增强版百分比布局库(percent-support-lib)
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/46767825: 本文出自:[张鸿洋的博客] 一 概述 上周一我们发布了Andr ...
- 【有奖】NOIP普及组模拟赛 个人邀请赛 乐多赛
题目描述 日本数学家角谷有一个猜想:任意一个自然数,经过以下过程,最终会得到1.现在请你打印出任意一个数使用角谷猜想转换为1需要几次. 演变方式: 1.如果这个数为奇数,则将它×3+1.如果这个数为偶 ...