相信接触过ajax的都觉得其post,get提交很方便,那么他是怎么实现的呢?基于此我们就不得不谈到js中的XMLHttpRequest对象.

其中w3c中是这样解释的:　

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

    • 在不重新加载页面的情况下更新网页
    • 在页面已加载后从服务器请求数据
    • 在页面已加载后从服务器接收数据
    • 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象的方法主要有:

abort()方法

request.abort()

中断当前对象的HTTP请求.

open方法

request.open(method,url,sync);

初始化HTTP连接请求对象,设置请求方法,地址,认证信息.method可以定义为"POST","GET"两种

send 方法

request.send("args");

向服务器发送一个HTTP请求,并获取返回结果.

setRequestHeader方法:

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");

在请求header中设置Header/Value值对并发送到服务器端.

XMLHttpRequest 对象的属性主要有:

onreadystatechange

设置请求对象状态readystate改变时要调用的函数对象;

readyState

请求对象的状态值,含义如下:

0 - 请求对象被创建,但未初始化,即open方法未调用

1 - 装载中,open方法已调用,send方法未调用

2 - 已装载,send方法已调用,但还未获得Header信息

3 - 交互中,已获取了部分信息,这时调用responseText将得到不完整信息,会返回错误

4 - 所有数据已接收完成,可用responseText或responseBody得到完整数据

 responseBody

表示从HTTP响应得到的返回原始信息,内容的编码方式决定于请求的服务器端(UTF-8, UCS-2, UCS-4, Shift_JIS等)

responseText

HTTP请求返回数据体的字符串表示，缺省情况下用utf-8编码后返回，如果返回内容中有中文，服务器端的数据必须用utf-8编码，否则就会出现乱码。

responseStream

HTTP请求返回数据的流对象,该对象实现IStream接口.

responseXML

返回XML格式的数据对象. 服务器端返回数据为XML格式数据时可用.服务器端用动态语言生成xml时,必须设置content-type为text/xml，否则客户端得到的responseXML为空

status

HTTP返回代码.

200 - 成功

404 - 错误请求

500 - 服务器内部错误,等等. 详见HTTP协议.

statusText

HTTP返回状态文本描述.

实例POST代码:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>XMLHttpRequest测试</title>

        <script type="text/javascript">

        window.onload=function(){

            //监听a中的click事件

            document.getElementsByTagName("a")[0].onclick=function(){

                //创建XMLHttpRequest对象(注意大小写)

                //var request =window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");

                //考虑兼容性

                //var request=init();

                var request=new XMLHttpRequest();

                　function init(){

                　　if (window.XMLHttpRequest) {

                　　　return new XMLHttpRequest();

                　　}

                　else if (window.ActiveXObject) {

                　　return new ActiveXObject("Microsoft.XMLHTTP");

                　}

                }

                //添加时间戳 起到禁用缓存的效果

                var url=this.href;

                //+"?time="+new Date();

                //请求方式为GET请求

                //var method='GET';

                //请求方式为POST请求

                var method="POST";

                //准备发送请求(就像汽车发动机点火一样)

                request.open(method,url,true);

                //如果是Post请求,需要在此处添加setheader,格式如下:

                request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

                //发送请求(汽车运行..)

                //request.accept="text/html";

                //request状态变化

                request.onreadystatechange=function(){

                    //判断响应是否完成

                    if (request.readyState==4) {

                        //判断响应是否可用

                        if(request.status==200){

                            //打印响应信息

                            console.info(request.responseText);

                        }

                    }

                };

                var age=10;

                request.send("age="+age);

                //禁用a跳转

                return false;

            };

        };

    </script>

    </head>

    <body>

        <a href="hw.txt">点击我</a>

    </body>

    </html>

hw.txt内容

Hello Ajax!!!^_^

实际效果:

PS:get方式提交这里就不赘述了.单值得注意的是post提交的时候要在open之后send之前添加header属性值.另外还要注意的是post提交依赖服务器的支持,否则不能consol数据,报500,内部服务器错误.

Ajax提交底层原型XMLHttpRequest的更多相关文章

  1. 使用ajax提交form表单，包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  2. PHP 判断是否为Get/Post/Ajax提交

    <?php PHP 判断是否为Get/Post/Ajax提交 /** * 是否是AJAx提交的 * @return bool */ function isAjax(){ if(isset($_S ...

  3. jquery的ajax提交时loading提示的处理方法

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){     $("#loading").ajaxStart(function(){   ...

  4. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  5. 关于ajax提交的公共接口的一大用处

    在项目框架搭建的时候,就写了ajax提交的公共接口,是想统一的日志和处理ajax返回的错误信息. 今天,却又帮我解决了另外一个问题:每次点开某个页面,有一个ajax请求总是会调用两次,于是打开chro ...

  6. 使用ajax提交form表单（转）

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  7. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  8. 向后台提交数据：通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

    原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 ...

  9. spring mvc接收ajax提交的JSON数据，并反序列化为对象

    需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...

随机推荐

  1. word插入图片显示不完整的解决的方法

    有时在编写word文档,插入图片时,会出现图不完整的情况. 解决方法是:选中图片,段落格式设置为单位行距(不是22磅),图片格式为嵌入式.问题解决.

  2. warning: shared library text segment is not shareable

    warning: shared library text segment is not shareable error: treating warnings as errors 近期在调试一个Gsen ...

  3. 单点登录SSO原则的实现

    单点登录SSO(Single Sign On)简单地把它是下一个在多系统环境中共存,在用户登录,不要在其他系统上的登录.这是用户第一次登录得到所有其他系统的信任. 单点登录在一个大型网站非常频繁使用, ...

  4. rdlc报告vs2008编辑正常，在vs2012在对错误的编辑

    最近我们的系统开发的工具vs2008升级到2012,由于系统是非常的报告是由rdlc发展.今天 有需要修改的报告满足需求.直接使用vs2012正确rdlc报告编辑,结果本次变动后.报表都报错. 后来我 ...

  5. RPC框架实现

    转载RPC框架实现 RPC(Remote Procedure Call,远程过程调用)框架是分布式服务的基石,实现RPC框架需要考虑方方面面.其对业务隐藏了底层通信过程(TCP/UDP.打包/解包.序 ...

  6. TS流文件

    简单介绍编辑 随着从HDTV录制的高清节目在网上的流传,烧友们对TS这个名词大概已经不陌生了.但随之而来就是怎样播放.怎样加入字幕等等的一系列问题.本文将重点介绍一下这方面的应用操作. 先来简要介绍一 ...

  7. 使用ArcGIS API for Silverlight 进行复合多条件空间查询

    原文:使用ArcGIS API for Silverlight 进行复合多条件空间查询 这两天帮网上认识的一个兄弟做了一个查询的示例,多多少少总结一下,在此和大家分享. 为什么说是复合多条件呢?因为进 ...

  8. Asp.net MVC + EF + Spring.Net 项目实践（二）

    这一篇主要介绍数据库和entity framework集成 1. 先创建数据库,很简单的几张表,但也涉及了一些主外键关系.联合主键等,关系图如下(DB脚本在最后) 2. 打开VS,现在建立Model实 ...

  9. 程序员面试必备经典CTCI，谷歌面试官经典作品！

    1.1 判断一个字符串中的字符是否唯一 1.2 字符串翻转 1.3 去除字符串中重复字符 1.8 利用已知函数判断字符串是否为另一字符串的子串 2.1 从链表中移除重复结点 2.2 实现一个算法从一个 ...

  10. 微信应用号开发知识贮备之altjs官方实例初探

    天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生.从获得微信应用号邀请的业内人士发出来的一张开发工具源码截图可以看到,reacjs及其相应的FLUX框架altjs很有可能会成 ...