javascript学习笔记(七)Ajax和Http状态码


Posted in Javascript onOctober 08, 2014

Ajax及其工作原理

AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。

AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com';或者使用服务器代理,代理XMLHttpRequest文件

AJAX是基于现有的Internet标准,并且联合使用它们:

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

javascript学习笔记(七)Ajax和Http状态码

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建Ajax对象:

//IE6以上
var oAjax = new XMLHttpRequest();

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
连接服务器

oAjax.open(方法,url,是否异步)
我们都知道,Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。所以,Ajax天生就是工作在异步模式的(异步为true,同步false)

同步和异步

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
(简单点说:同步就是只能一件一件事的来做,而异步就是可以多件事同时进行)

发送请求send()

<script type="text/javascript">

function getDoc(){

    var xmlhttp;

    if(window.xmlhttpRequest){

        xmlhttp=new XMLHttpRequest();

    }

    else{

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6

    }

    xmlhttp.onreadystatechange = function(){

        if(xmlhttp.readyState==4&&xmlhttp.status==200){

            document.getElementById("myId").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET", index.php,true);

    xmlhttp.send();

}

</script>

</head>

<body>

    <button type="button" onclick="getDoc()">请求数据</button>

</body>

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
接收返回信息

oAjax.onreadystatechange = function(){   //当请求状态改变时要调用的事件处理器

    alert(oAjax.readystate);          

}
只要readyState属性的值发生变化时,便会触发一次readyStatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们只对readyState值为4的阶段感兴趣,因为这时所有数据都已经就绪,不过,必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子:

var xhr = createXHR();

xhr.onreadystatechange = function () {

    if (xhr.readyState == 4) {

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

            alert(xhr.statusText);

        } else {

            alert("Request was unsuccessful: " + xhr.status);

        }

    }

};

xhr.open("get", "example.txt", true);

xhr.send(null);

XHR对象

当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态,直到请求被处理,然后才接收一个回应。readyState就是XHR请求的状态属性,它本身有5个属性值:

0(未初始化)还没有调用open()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法完成,已收到全部响应内容
3(解析)正在解析响应内容
4(完成)响应内容解析完成,可以再客户端使用了
status

status属性表示从服务器返回的响应状态码。例如:200表示成功,404表示未找到。

1字头:消息。这一类型的状态码,代表请求已被接受,需要继续处理。
2字头:成功。这一类型的状态码,代表请求已成功被服务器接收、理解、并接受。
3字头:重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。
4字头:客户端错误。这类状态码代表了客户端看起来可能发生错误,妨碍了服务器的处理。
5字头:服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

另附:http状态码详解

statusText

statusText是响应返回的文本信息,仅当readyState值为3或4的时候才能使用。当readyState为其它值时视图存取statusText属性将引发异常。

XHR的方法

方法 描述
abort() 导致当前正在执行的请求被取消
getAllResponseHeaders() 返回包含所有响应头的名称和值的单个字符|串
getResponseHeader(name) 返回响应头中指定的名称和值
open(method,url,async,username,pwd) 设置HTTP方法(get或post)等
send(content) 发出带有指定主体内容的请求
setRequestHeader(name,value) 使用指定的名称和值设置请求头
<script type="text/javascript">

        var oAjax =oAjax();

        alert(oAjax.readyState);//弹出"0"

        oAjax.open("get","index.html",true);

        alert(oAjax.readyState);//弹出"1"

        oAjax.send(null);

        alert(oAjax.readyState);//IE下弹出4,而firefox是2

        //可以通过readystatechange事件监听

        oAjax = XHR();

        oAjax.onreadystatechange = function () {

            alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最后还会再来个1

            //IE下则是1,1,3,4

        };

        oAjax.open("get","index.txt",true);

        oAjax.send(null);

</script>
Javascript 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
关于vue-router路径计算问题
May 10 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
javascript学习笔记(六)数据类型和JSON格式
Oct 08 #Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 #Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 #Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 #Javascript
JavaScript中获取样式的原生方法小结
Oct 08 #Javascript
吐槽一下我所了解的Node.js
Oct 08 #Javascript
Node.js 的异步 IO 性能探讨
Oct 08 #Javascript
You might like
PHP校验ISBN码的函数代码
2011/01/17 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
python实现windows下文件备份脚本
2018/05/27 Python
python实现简易动态时钟
2018/11/19 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python Selenium截图功能实现代码
2020/04/26 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
美国时尚在线:Showpo
2017/09/08 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
国培计划培训感言
2014/03/11 职场文书
高中生军训感言
2015/08/01 职场文书