玩转AJAX（第一天） AJAX基础

约定不等于承诺〃 2022-08-03 05:12 196阅读 0赞

我期待已久的AJAX今天终于迎来了第一天（感觉特别高兴）

废话不多说

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

Ajax对服务器没什么要求，可以为Java EE应用程序，.NET应用程序和其他类型的应用程序服务。可以通过Ajax，可以编写javascript代码来改进HTML，创建出丰富的交互性用户体验。

这些介绍感觉还是比较难懂，依我理解（当然是第一次接触的感觉） AJAX的作用就是用JS 进行后台调用 就是 用JS可以与后台进行数据交互，有一点本人特别喜欢，就是AJAX对后台进行数据交互，是局部的 ，前台看不到有任何回传现象，当然它也没有回传。

OK ，现在来说一下怎么写AJAX

在JS中下以下代码

//创建全局XmlHttpRequest变量

var XmlHttp;

//定义创建XmlHttpRequest的方法  
        function createXmlHttp()  
        \{

//判断是否是IE浏览器使用（抱怨一句![可怜][cute.gif]： 本人觉的如今浏览器各种各样，让我们web程序员特别无奈，为什么就不能统一一下呢？）  
            if (window.ActiveXObject) \{

//如果是IE则要通过ActiveXObject创建  
                XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
            \} else \{  
                XmlHttp = new XMLHttpRequest();  
            \}

//创建要调用的方法（比如button的onclick的点击事件）

function seach()  
        \{

//执行创建XmlHttpRequest的方法  
            createXmlHttp();

//给XmlHttpRequest方法设置一个回掉方法（方法名是mychage，当然这是自己取的名字![大笑][laugh.gif]）  
            XmlHttp.onreadystatechange = mychage;

//获取需要的参数（比如按钮点击要提交 一个文本框的值）  
            var name = document.getElementById("txtName").value;

//设置XmlHttpRequest的Open方法，三个参数（目前好像有5个参数，不过凡是VS提示参数有【】抱起来的参数是可给可不给的![大笑][laugh.gif]），第一个参事回传方式（post，或者 get），第二个参数是要执行的后台的代码，一般是用过滤器，也就是Handler类（一般处理程序），第三个参一般给true（本人也不是太了解 ![委屈][wronged.gif]）  
            XmlHttp.open("GET", "Handler.ashx?content=" + name, true);

//设置XmlHttpRequest的头setRequestHeader这句代码是死的（本人一般是Copy![大笑][laugh.gif]，因为太难记了）  
            XmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//调用send方法，send方法里的参其实就是你要给后台类的参，当然也可以在Open方法里用Url传参  
            XmlHttp.send();  
        \}

//回调方法

function mychage()  
        \{

//判断后台是否成功响应这次请求XmlHttp.readyState详解（[点击打开链接][Link 1]）XmlHttp.status详解（[点击打开链接][Link 2]）  
            if (XmlHttp.readyState == 4 && XmlHttp.status == 200) \{  
                //获取后台返回的数据responseText是文本值 还可以是responseXml等等  
                var dom = XmlHttp.responseText;  
           //拿到值以后就是完成一次后台，前台的数据交互了  
  
            \}  
        \}

这就是AJAX的原理，当然这只是很基础的，AJAX的作用远远不止这些。

AJAX的魅力确实很大，感觉自己对AJAX的好奇越来越大了

本人是第一次写博客，还有很多不足，如有写错的地方希望大家积极指出，让我知道自己的错在哪里，及时改正。（谢谢![大笑][laugh.gif]）

好了也不早了睡觉去![睡觉][sleep.gif]

[cute.gif]: /images/20220731/19f1c615ed614551813dcea817529dfa.png
[laugh.gif]: /images/20220731/b7211706ee704744b8ea25cefaeab41d.png
[wronged.gif]: /images/20220731/d5d857f4208d47a5bd4e56f7d79082d5.png
[Link 1]: http://wenku.baidu.com/view/7ad8dc8a84868762caaed5a1.html
[Link 2]: http://www.cnblogs.com/JemBai/archive/2009/04/10/1432939.html
[sleep.gif]: /images/20220731/0db596ed89a1457d8d9f76541593a106.png