当前位置: 首页 > 编程笔记 >

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

戚俊健
2023-03-14
本文向大家介绍javascript学习笔记(七)Ajax和Http状态码,包括了javascript学习笔记(七)Ajax和Http状态码的使用技巧和注意事项,需要的朋友参考一下

Ajax及其工作原理

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

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

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

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

创建 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天生就是工作在异步html" target="_blank">模式的(异步为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 Object 对象学习笔记,包括了Javascript Object 对象学习笔记的使用技巧和注意事项,需要的朋友参考一下 构造函数 new Object() new Object(value) 参数 value     可选的参数,声明了要转换成Number对象、Boolean对象或String对象的原始值(即数字、布尔值或字符串)。JavaScript 1.

  • 本文向大家介绍javascript学习笔记(三)BOM和DOM详解,包括了javascript学习笔记(三)BOM和DOM详解的使用技巧和注意事项,需要的朋友参考一下 js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准; [所有浏览器公共

  • request组件 : request 有三个部分 mesasge 文件夹里面的 request 和serverrequest(serverrequest继承自request)http里面的 request 1.message里面的request: 函数 : __construct():构造函数 getRequestTarget():获得请求的路径

  • autolad.php 负责处理框架类的自动加载,在core.php的registerAutoLoader()被调用 让我们分析来autolad的源码吧 变量: protected $instance:此框架采用单例模式,这个变量负责储存自己类的实例,所以在框架运行会,此类每个进程有且只有一个对象 protected $prefixes:这个变量存储 命名空间的与其对应的路径,我们

  • core.php 和 server.php 源码分析 首先我扪要一些swoole的基础 swoole 的整个进程种类是 manager进程,master进程,work进程,task进程 maskter进程:Swoole的主进程,是一个多线程的程序。其中有一组很重要的线程,称之为Reactor线程。它就是真正处理TCP连接,收发数据的线程。把接受到的数据分配给worker进程 manan

  • 本文向大家介绍JavaScript学习笔记之JS函数,包括了JavaScript学习笔记之JS函数的使用技巧和注意事项,需要的朋友参考一下 函数就是包裹在花括号中的代码块,前面使用了关键词function: 函数参数   函数的参数可以任意多个,不用声明变量类型,只用给出变量名: 函数返回值   在函数中使用return语句,函数会停止执行,返回调用它的地方。   函数的返回值也不用声明类型,直接