.NET ASP.NET（Ajax）

最新推荐文章于 2023-05-17 22:06:01 发布

梳碧湖-砍柴人

最新推荐文章于 2023-05-17 22:06:01 发布

阅读量272

点赞数

文章标签： .NET ASP.NET（Ajax）

本文链接：https://blog.csdn.net/weixin_44870681/article/details/102605676

版权

Ajax编程技术

什么是Ajax?

AJAX:”Asynchronous JavaScript and XML”
中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。
不是指一种单一的技术，而是有机地利用了一系列相关的技术：
web标准( Standards-Based Presentation )XHTML+CSS的表示,
使用 DOM( Document Object Model )进行动态显示及交互,
使用 XML 和 XSLT 进行数据交换及相关操作,
使用 XMLHttpRequest 进行异步数据查询、检索。
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合

普通的网页请求回执过程(请求响应模式)

在这里插入图片描述

使用原生态Ajax进行登录

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var btn = document.getElementById("mybtn");
            btn.onclick = function () {
                var name = document.getElementById("txtname").value;
                var pwd = document.getElementById("txtpwd").value;
                //先创建AJAX对象
                 var xhr;
                 if (window.XMLHttpRequest) {
                     //IE7+, Firefox, Chrome, Opera, Safari浏览器
                     xhr = new XMLHttpRequest();
                 }
                 else {
                     xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
                }
                //向服务器发送请求
                xhr.open("get", "01Ajax.ashx?name=" + name + "&pwd=" + pwd, true);
                xhr.send();//开始向服务器发送请求
                //当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
                //回调函数：当服务器将数据返回给客户端之后自动调用的函数
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {//表示服务器已经将请求的数据分析完成之后，将结果返回，并且保证浏览器接收到了请求结果
                        if (xhr.status == 200) {//表示响应已经彻底完成
                            alert(xhr.responseText);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form action="01Ajax.ashx" method="get">
        <input type="text" name="name" id="txtname" value="" />
        <br />
        <input type="password" name="pwd" id="txtpwd" value="" />
        <br />
        <input type="button" value="提交"  id="mybtn"/>
    </form>
</body>

服务器端处理Ajax请求

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
            string name = context.Request["name"];
            if (string.IsNullOrEmpty(name))
            {
                string html = CommonHelper.ShowHtml("01Ajax.html", null);
                context.Response.Write(html);
            }
            else
            {
                string pwd = context.Request["pwd"];
                if (name=="ylt"&&pwd=="123")
                {
                    context.Response.Write("登录成功");
                }
                else
                {
                    context.Response.Write("登录失败");
                }
            }
        }

Ajax优点

（1）Ajax在本质上是一个浏览器端的技术
（2）Ajax技术之主要目的在于局部交换客户端及服务器间之数据
（3）这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
（4）与服务器之间的沟通，完全是透过Javascript 来实行
（5）使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
（6）AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

XMLHttpRequest对象

（1）Ajax应用程序的核心就是它。
（2）XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
（3）简而言之：它可以异步从服务器端获取txt或者xml数据

创建XMLHttpRequest对象

使用XMLHttpRequest对象按照下面模式，可以同步地XMLHttpRequest对象：
（1）创建对象； - new (叫助手过来)
（2）创建请求； - open (告诉他要去做的事情)
（3）发送请求； - send (去吧)

先来创建XMLHttpRequest对象

IE7及以上、谷歌、Firefox、safari和Opera中创建该对象的JavaScript代码为：

var xhr = new XMLHttpRequest();

在IE5/6中代码为：

var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);

注意，JavaScript区分大小写。

为XMLHttpRequest对象设置请求参数

GET方式

（1）设置参数：xhr.open(“GET”, “GetAreasByAjax.ashx?isAjax=1”, true);
（2）GET方式请求可以设置浏览器不使用缓存：xhr.setRequestHeader(“If-Modified-Since”, “0”);
（3）发送: xhr.send(null);//GET方式

POST方式

（1）设置参数：xhr.open(“POST”, “GetAreasByAjax.aspx”, true);
（2）添加请求头：xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
（3）发送：xhr.send(“isAjax=1&na=123”);//POST方式
问题：请求发送出去后会有响应回来，那我怎么知道请求已经返回了呢？

设置回调函数

异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是：
（1）创建该对象；-new
（2）设置readystatechange事件触发一个回调函数; -onreadystatechagne
（3）打开请求；-open
（4）发送请求；-send
** 注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。**
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；

XMLHttpRequest常用方法

在这里插入图片描述

异步对象常用属性：

在这里插入图片描述

异步对象readyState属性

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。对象已经创建，但还未初始化，即还没调用open方法；
1：已打开。对象已经创建并初始化，但还未调用send方法；
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕

异步对象status属性

200: “OK”
404: 未找到页面
500：服务器出现异常则直接去服务器检查异步请求的问题

常见错误

AJAX请求服务器时如果服务器出错了怎么办？
编程常见错误
XMLHttpRequest大小写不正确；

多写了对圆括号：
正确：xHRObject.onreadystatechange =getData;
错误：xHRObject.onreadystatechange =getData();
必须弄清楚，在JavaScript中：
函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量；
没有圆括号，是将函数本身赋给等号前的变量。

面试题：

AJAX解决什么问题？如何使用AJAX？AJAX有什么问题需要注意？项目中哪里用到了AJAX？
异步问题；
首先下载ajax.dll————ajax插件；把ajax.dll导入到项目；XMLHttpRequest对象；
Ajax应用需要注意的事项：
　　现在把常见的问题列举如下。
　　1、编码问题
　　注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBScript的话还可以转化，但是VBScript只有IE支持。
　　所以，选择UTF-8编码是一劳永逸的办法。
　　2、清除服务器端文件的缓存。
　　当用XMLHTTP取回一个服务器端的文件，文件会缓存在浏览器端。下次再取文件时，不会再去服务器取文件。所以，对于刷新频繁的文件，一定要指定文件的过期时间。
　　3、什么时候使用XML
　　Ajax里的X指的就是XML，可是真的XML就是最好的解决方案吗?XML和JSON相比，在传递同等量的信息时，XML文件更大。所以往往JSON是更好的选择。不过，你还可以直接输出Javascript执行，这样的效率往往更高：不需要写复杂的回调函数。不过安全问题也要更加注意。
　　4、两种Ajax的方式
　　一些人的基础可能还不是很扎实，并不非常了解Ajax的原理，那你知道Ajax由哪两种方式来实现吗?
　　最古老的一种是iframe来加载一个包含js的网页，这个网页里的脚本用 top.function来调用parent页面里的函数。但是，你可以指定a的target和form的target，这样就不用序列化表单，实际上能很方便地发送表单。当然后期就稍微有点麻烦，出现问题也不容易解决。
　　后来就是xmlhttp组件的方式。什么时候挑选什么方式，这也是一种技巧。
　　5、跨域问题
　　如果一个脚本不在同一个域，两者就不能相互调用。如果iframe里是其他域的网页，就不能访问parent页的具体内容。如果需要访问远程的XML，比如RSS FEED，建议可以用服务器端脚本来中转。在访问量不是非常大的情况下还是很很好的一个解决办法。不过，翻阅JQuery手册发现它能调用(执行)跨域的脚本，具体怎么做的还不是很清楚。大家可以下载JQUERY未加密的版本来研究下。
　　6、安全问题
　　在服务器端，虽然客户端能预处理很多东西，你仍要注意一句话：一切来自客户端的变量都是有害的。不在Ajax的情况下很多程序员往往会放松警惕。这使得安全问题更隐蔽。如果是开源程序的话那么问题就会在网友面前马上暴露出来;黑盒的情况下，往往被入侵了还是找不出原因。
　　结语：实际上在这个框架横行的年代直接编写Ajax实现代码的机会并不多，很多JS框架都集成了AJAX调用函数，一些服务器端的框架，例如THINKPHP也集成了AJAX。但是，理解一些底层的东西，还是有利于排除BUG，提高AJAX应用的性能的。
　　
项目中哪里用到了AJAX：
表单验证
　　AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下使用。AJAX的核心：向服务器发送多个请求而无需用户等待来至服务器的响应。
AJAX解决的问题就是“无刷新更新页面”，用传统的HTML表单方式进行页面的更新时，每次都要将请求提交到服务器，服务器返回后再重绘界面，这样界面就会经历：提交→变白→重新显示这样一个过程，用户体验非常差，使用AJAX则不会导致页面重新提交、刷新。
　　AJAX最本质的实现是在Javascript中使用XMLHttpRequest进行Http的请求，开发中通常使用UpdatePanel、JQuery等方式简化AJAX的开发，UpdatePanel的方式实现AJAX最简单，但是数据通讯量比较大，因为要来回传整个ViewState，而且不灵活，对于复杂的需求则可以使用JQuery提供的ajax功能。
UpdatePanel的内部原理。
　　AJAX最重要的问题是无法跨域请求，也就是无法在页面中向和当前域名不同的页面发送请求，可以使用在当前页面所在的域的服务端做代理页面的方式解决。

梳碧湖-砍柴人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.NET ASP.NET（Ajax）

Ajax编程技术什么是Ajax?AJAX:”Asynchronous JavaScript and XML”中文意思：异步JavaScript和XML。指一种创建交互式网页应用的网页开发技术。AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。不是指一种单一的技术，而是有机地利用了一系列相关的技术：web标准( Standards-Based Presenta...
复制链接

扫一扫