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 第三章章节总结的例子
Mar 23 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
vue的mixins属性详解
Mar 14 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 Javascript
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自动更新新闻DIY
2006/10/09 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
Vue源码探究之虚拟节点的实现
2019/04/17 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 字符串操作方法大全
2014/03/11 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
怎样自定义一个异常类
2016/09/27 面试题
大学军训感言400字
2014/03/11 职场文书
解除同居协议书
2015/01/29 职场文书
煤矿安全保证书
2015/02/27 职场文书
民政工作个人总结
2015/02/28 职场文书
Python OpenCV实现图像模板匹配详解
2022/04/07 Python