Javascritp中XMLHttpRequest实现AJAX笔记

AJAX

对于WEB开发者来说，AJAX这个词一点也不陌生，现在说说大概会想到以下几点：

 

•无刷新改变页面数据

•异步通信

•$.ajax、$.get、$.post

•Asynchronous Javascript And XML

•...

AJAX就是一种交互式的网页应用技术，主要目的的提升用户体验，其原理是利用 Javascript的XMLHttpRequest对象与服务器通信获取数据后填充在页面中，从而实现不刷新整个页面却能把信息反馈给用户的效果。

通常使用的AJAX
我们通常使用的AJAX应该绝大多数都是jQuery封装好的，所以时间久了我们会对jQuery 形成很大的依赖。而且，在有些使用场景里，我们只用到了AJAX却把整个jQuery文件包含进来，这样会影像网页的加载时间（在用户网络不好的情况下更糟糕）。

所以，掌握原生的AJAX写法还是很有必要的，不仅能摆脱jQuery的依赖，还能进一步加深对异步通信的理解。如果抽时间再去研究XMLHttpRequest对象那就更赞了。

原生的AJAX

•生成XMLHttpRequest对象

 代码如下 复制代码
var XMLReq;
if (window.XMLHttpRequest) {
    XMLReq = new XMLHttpRequest();
} else {
    XMLReq = new ActivateXObject('Microsoft.XMLHTTP');
}

在IE浏览器里没有XMLHttpRequest这个对象，要使用 ActivateXObject('Microsoft.XMLHTTP')来替代。

•向服务器发送请求

 代码如下 复制代码

// for GET method
XMLReq.open('GET', 'ajax_get.html', true);
XMLReq.send();

// for POST method
XMLReq.open('POST', 'ajax_post.html', true);
XMLReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLReq.send('key=value&key2=value2');

上面代码中XMLReq.open()的第三个参数就是控制是否异步请求的，当为true的时候就是我们说的异步通信，为false的时候就按照正常的javascript逻辑顺序执行。真正异步的目的就是在向服务器请求数据的时候不影响正常的javascript代码执行，否则一旦请求时间过长或者出错可能影响整个页面的浏览。

•处理服务器响应数据

 代码如下 复制代码

XMLReq.onreadystatechange = function () {
    if (4 == XMLReq.readyState && 200 == XMLReq.status) {
        var data = XMLReq.responseText;
        // return xml data
        // var data = XMLReq.responseXML;
    }
}

一个完整的AJAX请求过程可以对照XMLReq.readyState参数清晰的理解清楚，不同的值表示过程如下：

readyState 过程变化
0 请求未初始化
1 服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成，且响应已就绪

Simple Demo
ajax.html

 代码如下 复制代码

<html>
    <script type="text/javascript" charset="utf8">
        function my_ajax(url, callback) {
            var XMLReq;
            if (window.XMLHttpRequest) {
                XMLReq = new XMLHttpRequest();
            } else {
                XMLReq = new ActivateXObject('Microsoft.XMLHTTP');
            }

            XMLReq.onreadystatechange = function() {
                // alert(XMLReq.readyState);
                if (4 == XMLReq.readyState && 200 == XMLReq.status) {
                    callback(XMLReq.responseText);
                }
            }

            XMLReq.open('GET', url, false);
            XMLReq.send();
        }

        function btn_click() {
            my_ajax('ajax_get.html', function (data) {
                    document.getElementById('result').innerHTML = data;
                }
            );

            alert('ok');
        }
    </script>

    <body>
        <input type="button" value="Click" onclick="btn_click()" />
        <div id="result"></div>
    </body>
</html>

ajax_get.html

 代码如下 复制代码

<div> I am ajax get data </div>

本文意在抛砖引玉，有空的时候能看一看原生的东西，尽管比较复杂。

使用XMLHttpRequest 实现ajax效果

这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！

客户端myAjax.html代码：

 代码如下 复制代码

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>AJAXDEMO</title>
 </head>
<mce:script language="javascript" type="text/javascript"><!--
function btn_onclick()
{  
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于
            if (!xmlhttp) {
                alert("创建xmlhttp对象异常！");
                return false;
            }
          xmlhttp .open("POST","GetDate1.ashx?&ts" +new Date(),false);//准备向服务器的GetDate1.ashx发出Post请求
          xmlhttp.onreadystatechange = function() //需要监听onreadyStatechange事件
          {
             if(xmlhttp.readyState == 4) //服务器完成
             {
               if(xmlhttp.status == 200)   //如果状态码为200则是成功
               { 
                   document.getElementById ("Text1").value=xmlhttp.responseText; //responseText属性为服务器返回的文本
               }
               else
               {
                    alert("AJAX服务器返回错误！");
               }
            }
          }
          xmlhttp.send(); //才开始发送请求  
}
// --></mce:script>
<body>
 <input id="Text1" type="text" disabled="disabled" /><input id="button1" type="button" value="显示系统时间"  onclick="btn_onclick()" />&nbsp;
</body>
</html>&nbsp;

服务端GetDate1.ashx 代码 (用ashx文件来处理 ,不需要HTML代码,只需服务端处理返回数据 )

 代码如下 复制代码

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
       
            context.Response.Write(DateTime.Now.ToString()); //显示服务端时间
        }
时间： 2024-10-27 02:14:46

Javascritp中XMLHttpRequest实现AJAX笔记的相关文章

AJAX开发中XMLHttpRequest有效性问题

ajax|request|xml|xmlhttprequest|问题 AJAX开发者面对的一个最大问题是当XMLHttpRequest不可用时如何反应. 虽然大部分现代浏览器支持XMLHttpRequest,但还是有少量的用户,他们的浏览器不能支持,或由于浏览器安全设置而阻止对XMLHttpRequest的使用.所以,你应该尽力保证应用系统"正常降级"使用,在系统中保留适用于不支持XMLHttpRequest的浏览器的功能. 在购物车例子中,最好的方法是有一个Add to Cart按钮

AJAX在不同浏览器中XMLHttpRequest对象的生成示例

本文为大家介绍下AJAX在不同浏览器中XMLHttpRequest对象是怎样生成的,以方便我们针对不同浏览器进行测试,感兴趣的朋友可以参考下,希望对大家有所帮助   复制代码 代码如下: <script type="text/javascript"> function ajax() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { /

JavaScript中浅讲ajax图文详解_javascript技巧

1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

ajax的异步请求-Jquery中$.post和$.ajax的区别在哪里呢

问题描述 Jquery中$.post和$.ajax的区别在哪里呢 一直搞不懂这两种请求到底区别在哪呢,求大神指教,两种我接收数据的时候都是用的eval去解析的. 解决方案 $.post就是post请求,$.ajax可以通过配置type为get/post(及其他可用的http方法,如get,delete)指定提交方法,返回数据jquery一般会通过响应头来判断类型自动生成对应的数据,如响应头为application/json会自动转为json对象,其他当做text/html处理 $.post最终使

总结jquery中的六种Ajax数据交互应用

jquery中的几种ajax请求,包括最底层的方法$.ajax(),第二层的load().$.post().$.ajax(),第三层的$.getJSON().$.getScript().  代码如下 复制代码 <script type="text/javascript"> //jquery中的几种ajax请求 function ajaxRequest(){     /*        $.ajax();最底层的方法        load().$.post().$.ajax

C#中使用Oracle 存储过程笔记

oracle|笔记|存储过程 C#中使用Oracle 存储过程笔记 1. 调用包含out/ in out类型参数的存储过程 存储过程: CREATE OR REPLACE PROCEDURE "SITE_EDITSITEDATAEXIST" (id_ number, name_ varchar2, httpRoot_ varchar2, flag out integer )//out 只具备输出功能 in out 为输入/输出型 as tempNum integer; begin fl

asp.net中mvc使用ajax提交参数的匹配问题解决探讨

本文为大家介绍下使用javaScript解决asp.net中mvc使用ajax提交参数的匹配问题,遇到类似情况的朋友可以参考下,希望对大家有所帮助   想到在asp.net的mvc中如果使用ajax向服务端传递参数时如果参数是一个类或者是个数组(或List集合)以及更复杂的对象时,服务端总是会发 生取不到值的情况,当然网上也有很多解决的例子,但都是在服务端想办法来解决的(比如将json转换为字符串,再在服务端反序列化为一个对象),为何不能 在客户端就把这个问题搞定. 其实问题没那么复杂,那是因为

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

 本篇文章主要是对asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,需要对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %> <!DOCTYPE html PUBLIC &quo

mvc的action中如何获取ajax post过来的数据？Request Payload

问题描述 mvc的action中如何获取ajax post过来的数据?Request Payload 我网上下载的demo,在action中可以获取到前端post过来的数据 但是,怎么在我的mvc2程序中获取不到啊? 解决方案 你用Request.Form[""take""]看能不能获取