原始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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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开发中常用的8个小技巧
2008/08/27 PHP
用php实现选择排序的解决方法
2013/05/04 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
学习ExtJS border布局
2009/10/08 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现挑选出来100以内的质数
2015/03/24 Python
Python字符串详细介绍
2015/05/09 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
python九九乘法表的实例
2017/09/26 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python opencv如何实现图片绘制
2020/01/19 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
英语自荐信常用语句
2013/12/13 职场文书
个人租房协议书
2014/11/28 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python