AJAX简介

没有AJAX会怎么样？普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面，比如实现显示服务器的时间。每次都要刷新面的坏处：页面刷新打断用户操作、速度慢、增加服务器的流量压力。如果没有AJAX，在youku看视频的过程中如果点击了“顶、踩”、评论、评论翻页，页面就会刷新，视频就会被打断。

AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中，不是整个页面刷新，而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据，就像JavaScript版的WebClient一样，在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据，这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象

 

XMLHttpRequest常用属性

属性

说明

onreadystatechange

返回或设置异步请求的事件处理程序

readyState

返回状态码：0：未初始化；1：打开；

2：发送；3：正在接收；4：已加载

responseText

使用字符串返回HTTP响应

responseXML

使用XML DOM对象返回HTTP响应

status

返回HTTP状态码

 

 

 

GetData1.html
GetData1.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            document.getElementById("Button1").onclick = function () {

                //向服务器请求 时间

                //1.创建异步对象（小浏览器）

                var xhr = new XMLHttpRequest();

                //2.设置参数

                xhr.open("get", "GetData1.ashx", true);

                //3.让get不从浏览器获取缓存数据

                xhr.setRequestHeader("If-modified-Since", "0");

                //4.设置回调函数

                xhr.onreadystatechange = function () {|
                //readyState==4 指数据接收完成

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        var res = xhr.responseText;

                        alert(res);

                    }

                };

                //5.发送异步请求

                xhr.send(null);

            };

        }

    </script>

</head>

<body>

    <input id="Text1" type="text" />

    <input id="Button1" type="button" value="button" />

</body>

</html>

GetData1.ashx
GetData1.ashx

public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            System.Threading.Thread.Sleep(2000);

            context.Response.Write(DateTime.Now.ToString());

        }

 

7.1 异步请求基本步骤

使用XMLHttpRequest对象

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

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

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

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

 

 

7.2 创建XMLHttpRequest对象

先来创建XMLHttpRequest对象

•在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：

var xhr = new XMLHttpRequest();

•在IE5/6中代码为：

var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

注意，JavaScript区分大小写。

 

7.3 设置异步对象参数并发送请求

1.GET方式:

1.1 设置参数

xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2 GET方式请求可以设置浏览器不使用缓存 
xhr.setRequestHeader("If-Modified-Since", "0");

1.3 发送:

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

2.POST方式：

1.1 设置参数：

xhr.open("post", "GetData1.ashx", true);

1.2 添加请求头：

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

1.3 发送：

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            //1.get方式

            document.getElementById("Button1").onclick = function () {

                //向服务器请求 时间

                //1.创建异步对象（小浏览器）

                var xhr = new XMLHttpRequest();

                //var xmlRequest = new ActiveXObject("Microsoft.XMLHTTP"); //适用于IE6.0

                //2.设置参数

                xhr.open("get", "GetData1.ashx?name=tangsansan", true);

                //3.让get不从浏览器获取缓存数据

                xhr.setRequestHeader("If-modified-Since", "0");

                //4.设置回调函数

                xhr.onreadystatechange = function () {

                    //4.1.当完全接收完响应报文后（readyState==4）并且响应状态码为200的时候

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        //4.2.获取响应报文体内容

                        var res = xhr.responseText;

                        alert(res);

                    }

                };

                //5.发送异步请求

                xhr.send(null);

            };

            //2.post方式

            document.getElementById("Button2").onclick = function () {

                //向服务器请求 时间

                //1.创建异步对象（小浏览器）

                var xhr = new XMLHttpRequest();

                //2.设置参数

                xhr.open("post", "GetData1.ashx", true);

                //3.添加请求头

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

                //4.设置回调函数

                xhr.onreadystatechange = function () {

                    //4.1.当完全接收完响应报文后（readyState==4）并且响应状态码为200的时候

                    if (xhr.readyState == 4 && xhr.status == 200) {

                        //4.2.获取响应报文体内容

                        var res = xhr.responseText;

                        alert(res);

                    }

                };

                //5.发送异步请求

                xhr.send("name=tangsansan&age=27");

            };

        }

    </script>

</head>

<body>

    <input id="Text1" type="text" />

    <input id="Button1" type="button" value="get" />

    <input id="Button2" type="button" value="post" />

</body>

</html>

Asp.Net - 7.AJAX的更多相关文章

  1. ASP.NET jquery ajax传递参数

    第一种:GET传递 前台 ajax   GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: func ...

  2. asp.net的ajax以及json

    asp.net的ajax以及json 来现在这家公司以前,从未接触过webform,以前在学校做的项目是php,java以及asp.net mvc的,当时asp.net mvc用的是razor引擎,所 ...

  3. asp 按钮 调用ajax时 会出现返回错误，尽量使用html按钮进行调用

    asp 按钮 调用ajax时 会出现返回错误,尽量使用html按钮进行调用

  4. ASP.NET 5 - $.ajax post JSON.stringify(para) is null

    JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...

  5. ASP.NET中Ajax的用法

    在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...

  6. ASP.NET MVC Ajax.ActionLink 简单用法

    ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...

  7. asp.net WebService+Ajax调用

    default.aspx 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&qu ...

  8. asp.net mvc ajax 异步刷新例子

    这几天在asp.net中使用ajax来做异步刷新,这里整理一下 1.首先看前台页面点击的时候调用函数 function shuxin() { $.ajax( { url: "GetValue ...

  9. ASP.NET 使用Ajax

    转载: http://www.cnblogs.com/dolphinX/p/3242408.html $.ajax向普通页面发送get请求 这是最简单的一种方式了,先简单了解jQuery ajax的语 ...

  10. asp.net接收ajax请求参数时为空的现象

    如题,如果使用ajax请求asp.net后台时,如果使用jquery时,默认是添加了请求头,使后台能识别,并能通过Request对象进行获取. 但是如果你使用的是window.XMLHttpReque ...

随机推荐

  1. session会话复制

    前几天请教了Yoda大神关于会话复制方面的问题,        如果客户访问是两个服务器的东西,这样会有两个分别的session, 这两个session之间怎么交互,集群环境下,同构的服务器,专业术语 ...

  2. Oracle sysdate 时间加减

    加法 select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate,1 ...

  3. Java反射-方法(Method)

    工作了三年,第二次使用反射! 遇到的问题描述: 多个页面查询后,返回的List中的对象属性为“.00”,页面显示不友好. 查询原因是因为查询数据的SQL为:to_char(a.applyAmount, ...

  4. Genymotion加速下载虚拟镜像速度慢失败Connection timeout

    Genymotion也算是个android的模拟程序了, Add new device后下载速度太慢了,容易失败 解决方法有二: 1.设置HTTP代理,在Setting->Network,自己设 ...

  5. Java实现读取文件夹下（包括子目录）所有文件的文件名

    在编程的过程中,经常会用到对文件的读写操作等.比如,找出某一个文件夹下的所有文件名等. 下面的程序给出了,获取某一给定文件夹下所有文件的绝对路径的程序.可以作为某一个模块,在需要的时候直接使用. pa ...

  6. linux操作系统flash player问题--ubuntu

    adobe公司停止了对linux系统的flash player的更新,这导致很多网页视频不能够通过浏览器观看,很是不爽! 还好,给用户留下了一点点希望,那便是chrome浏览器. 谷歌浏览器,有一款插 ...

  7. Apache Thrift 服务开发框架学习记录

    Apache Thrift 是 Facebook 实现的一种高效的.支持多种编程语言的远程服务调用的框架. 前言: 目前流行的服务调用方式有很多种,例如基于 SOAP 消息格式的 Web Servic ...

  8. STL---vector（向量）

    1 基本操作 (1)头文件#include<vector>. (2)创建vector对象,vector<int> vec; (3)尾部插入数字:vec.push_back(a) ...

  9. C#跨线程操作控件

    1.首先通过按键创建子线程: 创建子线程,子线程调用changeText方法. private void btnOK_Click(object sender, EventArgs e) { Threa ...

  10. MyBatis <if>标签的一些问题

    1.常见错误: There is no getter for property named 'parentId' in 'class java.lang.Long'(或者String) org.myb ...