AJAX——概述

前端之家收集整理的这篇文章主要介绍了AJAX——概述前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX一直在看,也一直在拖延,但是还是要一路走好才踏实。在生活中处处充满异步的年代,不学习AJAX怎么了得……

首先,解释一下异步:它是一种通讯方式,双方不需要共同的时钟,也就是接收方不知道发送方什么时候发送,所以在发送的信息中就要提示接收方开始接收的信息。另外一种含义是计算机多线程的异步处理。我们的PC机提供的标准通信接口都是异步的。接下来不如正题。


1AJAX是什么?

AJAX即“Asynchronous JavaScript And XML”(异步JavaScriptXML),是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新(当学了前三集的时候我知道可以把它放进一个updatepanel中)。而传统的网页如果需要更新内容的话必须重载整个网页页面

Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest 使您可以使用 JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XmlHttpRequest对象与服务器进行对话的是JavaScript技术。这不是一般的应用程序流,这恰恰是 Ajax 的强大功能的来源。

2、牛刀小试:

还记得那个时候我还没有学到AJAX,那个时候听说AJAX很高大上,也就是那个时候对这个东东感了兴趣,也让我们不再陌生。

(1)那些曾经ITOO我写过的AJAX

<span style="font-size:14px;">    $.ajax({
        type: "POST",url: "/SearchStudentInfo/AddStudentReload",data: "txtCandidateID=" + $("#txtCandidateID").val() + "&txtName=" + $("#txtName").val()
            + "&txtSex=" + $("#txtSex").comboBox('getText') + "&txtIdentityCardID=" + $("#txtIdentityCardID").val()
            + "&txtCollege=" + $("#txtCollege").comboBox('getText')
            + "&txtDepartment=" + $("#txtDepartment").comboBox('getText') + "&txtMajor=" + $("#Major").comboBox('getText')
            + "&txtClass=" + $("#Class").comboBox('getText') + "&txtDormitory=" + $("#txtDormitory").comboBox('getText')
             + "&txtLevel=" + $("#txtLevel").comboBox('getText'),success: function () {
            $("#dg").datagrid("reload");
            $.messager.alert("提示!","信息添加成功!");
            //$('#diaAdd').dialog('close');
        }
    })</span><span style="font-size:18px;">
</span>

(2)面向对象类型系统

<span style="font-size:14px;"><script language="javascript" type="text/javascript">
            //注册命名空间
            Type.registerNamespace("AspNetAjaxOverView");
            //定义一个类
            AspNetAjaxOverView.Person = function (firstName,lastName) {
                this._firstName = firstName;
                this._lastName = lastName;
            }
            //添加属性方法
            AspNetAjaxOverView.Person.prototype =
            {
                get_firstName: function () {
                    return this._firstName;
                },get_lastName: function () {
                    return this._lastName;
                },toString: function () {
                    return String.format("Hello,I'm {0} {1}.",this.get_firstName(),this.get_lastName());
                }
            }
            //注册person类
            AspNetAjaxOverView.Person.registerClass("AspNetAjaxOverView.Person");
            AspNetAjaxOverView.Employee = function (firstName,lastName,title) {
                //初始化自父类
                AspNetAjaxOverView.Employee.initializeBase(this,[firstName,lastName]);
                this._title = title;
            }
            //给employee类添加属性方法
            AspNetAjaxOverView.Employee.prototype =
            {
                get_title: function () {
                    return this._title;
                },//覆盖父类方法
                toString: function () {
                    //调用父类方法
                    return AspNetAjaxOverView.Employee.callBaseMethod(this,"toString") +
                        " My title is '" + this.get_title() + "'.";
                }
            }
            //注册Employee类,并声明继承来自Person类
            AspNetAjaxOverView.Employee.registerClass("AspNetAjaxOverView.Employee",AspNetAjaxOverView.Person);
 </script>

<input type="button" value="LIDA" onclick="alert(new AspNetAjaxOverView.Employee('XU','Dan','Chair man'));" /></span><span style="font-size: 12pt;">
</span>

Ajax 基本上就是把 JavaScript技术和XMLHttpRequest对象放在 Web 表单和服务器之间。当用户填写表单时,数据发送给一些JavaScript 代码不是直接发送给服务器。相反,JavaScript代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,JavaScript代码在幕后发送请求,用户甚至不知道请求的发出。更好的是,请求是异步发送的,就是说 JavaScript代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

然后,服务器将数据返回 JavaScript代码(仍然在 Web表单中),后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。JavaScript代码甚至可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预!这就是XMLHttpRequest的强大之处。它可以根据需要自行与服务器进行交互,用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。


3、总结

我们知道,AJAX的好处就是体现在如上所述,不让页面进行完整的刷新。可以刷新页面中的一小部分,可以降低页面中的数据传输量。要多少数据就请求多少数据。但是AJAX也会造成容易滥用,如果一个页面里还可以做其他的操作,用户不断的请求刷新,这样页面请求服务器的次数增加,会增加服务端的负担,从而最终降低了响应速度。AJAX还在进行中,让我们的页面在实现更多的功能的同时也是最轻的负担……

猜你在找的Ajax相关文章