`
haiyupeter
  • 浏览: 425892 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript Ajax

阅读更多
Ajax的核心对象为XMLHttpRequest对象,XMLHttpRequest负责前台与后台异步网络请求的交互。w3c对XMLHttpReqeust进行规范,但在各个浏览中新建XMLHttpRequest对象的方式仍然不同,使用时需要作浏览器兼容性的判断。作浏览器兼容性的判断。

JavaScript的XMLHttpRequest对象

var xmlHttpRequest;
// 创建XMLHttpRequest对象,在各个浏览器上,该对象的名称及创建方法不一样
function createXMLHttpRequest() {
    if (window.XMLHttpRequest) {
        // Firefox Chrome IE7+ 等浏览器支持 XMLHttpRequest 对象
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            // IE6等
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            // IE5等更老版本的浏览器
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
};
if( typeof window.HY == 'undefined') {
    HY = {};
}
HY.ajax = {
    callback : function() {
        if(xmlHttpRequest.readyState == 4) {
            if(xmlHttpRequest.status == 200) {
                var args = "";
                for(var i = 0; i < arguments.lenght; i++) {
                    args += arguments[i] + "\n";
                }
                alert(args);
            }
        }
    },
    // 发送Ajax请求
    submit : function() {
        if(xmlHttpRequest == null || typeof xmlHttpRequest == 'undefined') {
            xmlHttpRequest = createXMLHttpRequest();
        }
        xmlHttpRequest.open("GET", "getData", true);
        xmlHttpRequest.onreadystatechange = this.callback;
        xmlHttpRequest.send(null); 
    }
};

调用方式:
function submit() {
    HY.ajax.submit();
}

XMLHttpReqeust重要属性:
readyState
Http请求的状态,包含0-4共5个值,readyState的改变会触发onreadystatechange回调方法执行。
引用
0 init, XMLHttpRequest对象被创建或者XMLHttpRequest对象已被 abort() 方法重置
1 open,但是未send发送请求
2 send,向服务器发送请求,但未收到回应
3 receiving,响应请求头已经接收完成,响应开始接收,但未完成
4 loaded,响应体完成接收

responseText
XMLHttpRequest响应体接收完成,status状态为200后,responseText为响应体的文本(不包含响应头)

responseXML
XMLHttpRequest响应体接收完成,status状态为400后,若响应体的格式为XML,则responseXML返回的是XML相关的Dom对象,拥有对DOM操作的API

status
HTTP的状态码,200表示成功,404表示页面不存在,500表面服务器异常

statusText
HTTP状态描述文本:OK表示200,Not Found表示400,与status对应

XMLHttpRequest常用方法:open, onreadystatechange, send方法
open(method, url, async)
method 以GET或者以POST方式发送Ajax请求
url 请求链接。大部分情况下,浏览器要求url与当前页面必需是同一个域名,同端口号,才能发起Ajax请求。
async 是否以异步方式发起请求。若async为false,则send()方法响应完成后才能发起后续的send流程。

参考w3school中的open方法的说明
引用

这个方法初始化请求参数以供 send() 方法稍后使用。它把 readyState 设置为 1,删除之前指定的所有请求头部,以及之前接收的所有响应头部,并且把 responseText、responseXML、status 以及 statusText 参数设置为它们的默认值。当 readyState 为 0 的时候(当 XMLHttpRequest 对象刚创建或者 abort() 方法调用后)以及当 readyState 为 4 时(已经接收响应时),调用这个方法是安全的。当针对任何其他状态调用的时候,open() 方法的行为是为指定的。
除了保存供 send() 方法使用的请求参数,以及重置 XMLHttpRequest 对象以便复用,open() 方法没有其他的行为。要特别注意,当这个方法调用的时候,实现通常不会打开一个到 Web 服务器的网络连接。


send(body)
body可以为一个字符串或者是Document对象,该参数可以为null。
send方法在readyState不等于1时(由open()方法设置),则抛出异常。否则,它发送一个HTTP请求,该请求由以下几部分组成:

引用
之前调用 open() 时指定的 HTTP 方法、URL 以及认证资格(如果有的话)。
之前调用 setRequestHeader() 时指定的请求头部(如果有的话)。
传递给这个方法的 body 参数。

send()发出请求后,将readyState设置为2。如果open()方法设置的async参数为false,这个方法会阻塞并不会返回,直接readyState为4并且服务器的响应被完全接收。如果async参数为true,或者这个参数被忽略,则send()立即返回。
引用
如果服务器响应带有一个 HTTP 重定向,send() 方法或后台线程自动遵从重定向。当所有的 HTTP 响应头部已经接收,send() 或后台线程把 readyState 设置为 3 并触发 onreadystatechange 事件句柄。如果响应较长,send() 或后台线程可能在状态 3 中触发 onreadystatechange 事件句柄:这可以作为一个下载进度指示器。最后,当响应完成,send() 或后台线程把 readyState 设置为 4,并最后一次触发事件句柄。


abort()
abort方法将XMLHttpRequest对奖的readyState置为0,清空所有请求行为,一般可用于超时处理。
setRequestHeader()
setRequestHeader() 方法指定了一个 HTTP 请求的头部,它应该包含在通过后续 send() 调用而发布的请求中。这个方法只有当 readyState 为 1 的时候才能调用,例如,在调用了 open() 之后,但在调用 send() 之前。
如果带有指定名称的头部已经被指定了,这个头部的新值就是:之前指定的值,加上逗号、空白以及这个调用指定的值。
如果 open() 调用指定了认证资格,XMLHttpRequest 自动发送一个适当的 Authorization 请求头部。但是,你可以使用 setRequestHeader() 来添加这个头部。类似地,如果 Web 服务器已经保存了和传递给 open() 的 URL 相关联的 cookie,适当的 Cookie 或 Cookie2 头部也自动地包含到请求中。可以通过调用 setRequestHeader() 来把这些 cookie 添加到头部。XMLHttpRequest 也可以为 User-Agent 头部提供一个默认值。如果它这么做,你为该头部指定的任何值都会添加到这个默认值后面。
有些请求头部由 XMLHttpRequest 自动设置而不是由这个方法设置,以符合 HTTP 协议。这包括如下和代理相关的头部:
Host
Connection
Keep-Alive
Accept-charset
Accept-Encoding
If-Modified-Since
If-None-Match
If-Range
Range
getAllResponseHeaders()
当readyState 小于 3时,此方法返回null,否则返回服务器发送的所有的HTTP响应的头部。头部作为单个字符串返回,一行一个头部。每行用换行符 "\r\n" 隔开
getResponseHeader(header_name)
返回指定的HTTP响应头部的值
分享到:
评论

相关推荐

    javaScript Ajax核心学习

    JavaScript 和 AJAX 是 web 开发中的关键技术,用于创建交互式的网页应用。AJAX,全称"Asynchronous JavaScript and XML",即异步 JavaScript 和 XML,虽然它的名字包含 XML,但实际使用中,数据格式不仅限于 XML,...

    sql c# javascript ajax

    标题中的"sql c# javascript ajax"表明我们讨论的是四个关键的编程和技术概念,它们在现代Web应用程序开发中扮演着重要角色。以下是对这些概念的详细解释: 1. SQL(Structured Query Language):SQL是用于管理和...

    javascript ajax

    JavaScript AJAX(异步JavaScript和XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在现代Web开发中,AJAX是构建动态、交互性网站的关键工具。通过AJAX,用户可以实现页面的无刷新更新...

    javascript ajax请求,和接收服务器返回数据

    javascript ajax请求,和接收服务器返回数据

    javaScript ajax 访问WebServices

    用javaScript Ajax访问WebServices服务器端,引用了IBM developerworks社区James Snell写的两个js文件,纯HTML页面即可调用WebServices服务!

    JSEclipse javascript ajax

    **JavaScript、Eclipse与Ajax开发** 在IT行业中,JavaScript是一种广泛使用的客户端脚本语言,用于增强网页交互性和动态功能。Eclipse是一款强大的开源集成开发环境(IDE),支持多种编程语言,包括Java、...

    o3d lib1 graph javascript ajax

    o3d lib1 graph javascript ajax

    Javascript & Ajax 中文手册

    JavaScript 和 AJAX 是 web 开发中的两个重要概念,它们在创建动态和交互式的网页方面起着至关重要的作用。这个"Javascript & Ajax 中文手册"是由知名的在线学习平台 w3school 提供的,它为学习者提供了丰富的教程和...

    基于JavaScript ajax 远程电脑文件浏览下载web应用

    用ajax 和 JavaScript作为浏览器端, c++作为服务器端(socket写成) 自定义了一些GET和POST的语法来进行服务器和浏览器之间的通信 运行exe程序即可 远程电脑只需打开浏览器即可浏览和下载服务器电脑上的文件系统...

    javaScript_ajax

    JavaScript AJAX(Asynchronous JavaScript and XML)技术是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。它使得Web应用程序能够更加动态和响应式,提高用户体验。在本篇文章中,我们将深入...

    ajax_init_javascript_ajax_

    "ajax_init_javascript_ajax_"这个标题暗示我们将讨论一个用JavaScript原生方法封装的Ajax函数,这对于高效地构建动态交互的网站至关重要。通过这个封装,开发者可以更方便地调用Ajax请求,处理服务器返回的数据,...

    JavaScript封装Ajax完整示例代码

    相关文章:https://blog.csdn.net/superwebmaster/article/details/80678590 如有问题,下载文件内含有联系方式,可以一起讨论技术。

    ajax视频教程

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript与服务器进行交互,通过XML、JSON或其他...

    javascript-ajax:JavaScript Ajax

    JavaScript AJAX(Asynchronous JavaScript and XML)是Web开发中一种用于创建动态、交互性网页的技术。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容,极大地提升了用户体验。AJAX的...

    写个一个简单的web项目,把前端技术:html、css、JavaScript、jQuery,ajax,bootstrop等都放在这个web项目上了。

    在本项目中,JavaScript可能用于处理用户输入、更新DOM(Document Object Model)、执行异步通信(Ajax)等任务。它可以通过事件监听器(如`addEventListener`)响应用户的交互,使用`document.getElementById`或`...

    JavaScript语言与Ajax应用第二版_JavaScript语言与Ajax应用_JavaScript应用_javascri

    Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。在"JavaScript语言与Ajax应用(第二版)...

    javaScript Ajax

    ppt 学习资源这是一个很好的ppt资源

    ASP.NET AJAX深入浅出系列课程(19):VS 2008的JavaScript代码提示功能

    ASP.NET AJAX 深入浅出系列课程是针对开发者学习ASP.NET AJAX技术的一套系统教程,其中第19部分主要讲解了Visual Studio 2008中的JavaScript代码提示功能。这个功能极大地提升了JavaScript开发的效率,使开发者在...

Global site tag (gtag.js) - Google Analytics