原始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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JavaScript中对象介绍
Dec 31 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
详解python metaclass(元类)
2020/08/13 Python
Python的logging模块基本用法
2020/12/24 Python
Python实现微信表情包炸群功能
2021/01/28 Python
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
大学生物业管理求职信
2013/10/24 职场文书
综合实践活动方案
2014/02/14 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
建筑结构施工求职信
2014/07/11 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
2014年技术员工作总结
2014/11/18 职场文书
学校食品安全责任书
2015/01/29 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
Go语言入门exec的基本使用
2022/05/20 Golang