原始XMLHttpRequest方法详情回顾


Posted in Javascript onNovember 28, 2013

用一个典型的登录验证的例子来演示吧

一般来说,使用XMLHttpRequest对象来进行登陆验证要经过以下这几个步骤

1.使用DOM方式获得输入框中的值         

var userName = document.getElementById("userName").value;

2.创建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
        //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
        //排在前面的版本较新
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
            try{
                //取出一个控件名进行创建,如果创建成功就终止循环
                //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            } catch(e){
            }
        }
    }

3.注册XMLHttpRequest对象的回调函数,注册回调函数时,之需要函数名,不要加括号。    
//注册回调函数时,之需要函数名,不要加括号
    //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
    xmlhttp.onreadystatechange = callback;

4.设置( GET )连接信息     
//第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
//第二个参数表示请求的url地址,get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互,true表示异步
xmlhttp.open("GET","AJAXServer?name="+ userName,true);

5.发送请求 
xmlhttp.send(null);

6.(POST)方式,需要自己设置http的请求头,并且由于要进行编码,所以不能直接在XHR.open的第二个参数中将数据发过去,而应该用send()方法将数据传送过去
//POST方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);

回调函数:
//回调函数
function callback() {
    //alert(xmlhttp.readyState);
    //5。接收响应数据
    //判断对象的状态是交互完成
    if (xmlhttp.readyState == 4) {
        //判断http的交互是否成功
        if (xmlhttp.status == 200) {
            //获取服务漆器端返回的数据
            //获取服务器段输出的纯文本数据
            var responseText = xmlhttp.responseText;
            //将数据显示在页面上
            //通过dom的方式找到div标签所对应的元素节点
            var divNode = document.getElementById("result");
            //设置元素节点中的html内容
            divNode.innerHTML = responseText;
        } else {
            alert("出错了!!!");
        }
    }
}
Javascript 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 #Javascript
使用js写的一个简易的投票
Nov 27 #Javascript
juery框架写的弹窗效果适合新手
Nov 27 #Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 #Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 #Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 #Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 #Javascript
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
再论Javascript的类继承
2011/03/05 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
为python设置socket代理的方法
2015/01/14 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python 监测文件是否更新的方法
2019/06/10 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
出生公证书样本
2014/04/04 职场文书
体育比赛口号
2014/06/09 职场文书
酒店前台岗位职责
2015/04/16 职场文书
党小组推荐意见
2015/06/02 职场文书
环保守法证明
2015/06/24 职场文书
2019年入党思想汇报
2019/03/25 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
Java基础——Map集合
2022/04/01 Java/Android