基础：ASP.NET使用原始AJAX

vlambda
2021-07-10

基础：ASP.NET使用原始AJAX

AJAX请求和普通HTTP请求区别

什么是AJAX？

为什么有AJAX？

AJAX优点

创建XMLHttpRequest对象

为XMLHttpRequest对象设置请求参数

设置回调函数

详细代码：

应用场景：

AJAX请求和普通HTTP请求区别

AJAX通XMLHttpRequest对象请求服务器，服务器接受请求返数据实现刷新交互
普通http请求通httpRequest象请求服务器，服务器接受请求返数据需要页面刷新

什么是AJAX？

AJAX:”Asynchronous JavaScript and XML”
中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端的集合

为什么有AJAX？

因为传统的网页在登录时，用户输入账号密码之后，点击提交，然后发送到服务端，在这期间用户不能操作，服务器执行完之后在刷新页面，但是有了AJAX之后，用户就可以在此期间操作，因为在用户输入账号或密码的时候，就已经偷偷的向服务器发送了请求，但是不刷新页面。

AJAX优点

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

创建XMLHTTPREQUEST对象

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

使用XMLHttpRequest对象

按照下面模式，可以同步地XMLHttpRequest对象：

1.创建对象；- new (叫助手过来)

2.创建请求；- open (告诉他要去做的事情)

3.发送请求；- send (去吧)

为XMLHTTPREQUEST对象设置请求参数

1.GET方式

1.1设置参数

xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);

1.2GET方式请求可以设置浏览器不使用缓存
xhr.setRequestHeader("If-Modified-Since", "0");

1.3发送:

xhr.send(null);//GET方式

2.POST方式：
1.1设置参数：

xhr.open("POST", "GetAreasByAjax.aspx", true);
1.2添加请求头：

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

1.3发送：

xhr.send("isAjax=1&na=123");//POST方式

请求发送出去后会有响应回来，那我怎么知道请求已经返回了呢？

设置回调函数

异步使用XMLHttpRequest对象

异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。

使用模式应该是：

1.创建该对象；-new

2.设置readystatechange事件触发一个回调函数; -onreadystatechagne

3.打开请求；-open

4.发送请求；-send

注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。

如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。

如果已经准备好，就继续往下执行；

详细代码：


  
    
    
   
   <script type="text/javascript"> 
   $(function () { 
   $("#btnGetDate").click(function () { 
   //开始通过AJAX向服务器发送请求. 
   var xhr; 
   if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器 
   xhr = new XMLHttpRequest(); 
   } else {// 低IE 
   xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true); 
   xhr.send();//开始发送 
   //回调函数:当服务器将数据返回给浏览器后，自动调用该方法。 
   xhr.onreadystatechange = function () { 
   if (xhr.readyState == 4) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。 
   if (xhr.status == 200) {//判断响应状态码是否为200. 
   alert(xhr.responseText); 
   } 
   } 
   } 
   }); 
   }); 
   </script>

应用场景：

判断用户名是否重复
查看列表时，需要换页时，每一页的数据都不一样（对比用占位符传，有了AJAX之后，只需要将每页的数据进行传输就可以，不需要网页的重新渲染，不需要将整个html文档传过来重新渲染）

出处：https://www.freesion.com/article/7738262567/

支持小微：

腾讯云搞活动了？玩服务器的可以搞搞。就这几天时间。

云服务器限时秒杀，1核2G 首年95元！

链接：https://curl.qcloud.com/RX2amrlR

右下角，您点一下在看图片

小微工资涨1毛

商务合作QQ：185601686

vlambda博客
学习文章列表