原始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 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
javascript 二维数组的实现与应用
Mar 16 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
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简单获取文件扩展名的方法
2015/03/24 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python语言的12个基础知识点小结
2014/07/10 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python3人脸识别的两种方法
2019/04/25 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
高中生学习总结的自我评价范文
2013/10/13 职场文书
应聘护士自荐信
2013/10/21 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
考试没考好检讨书
2014/01/31 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Python访问Redis的详细操作
2021/06/26 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android