网页前端ajax请求与.net服务端的交互

1. 什么是ajax请求?

① AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。(叫做异步)  

//同步异步是什么区别请看<3同步异步>

② XMLHttpRequest 是 AJAX 的基础。

2. XMLHttpRequest 对象

    所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。(异步) //同步异步是什么区别请看<3同步异步>

//参考http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

① 创建XMLHttpRequest对象:

一般创建 XMLHttpRequest对象的语法：

</pre><pre name="code" class="javascript">variable=new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5和 IE6，请检查浏览器是否支持 XMLHttpRequest对象。如果支持，则创建 XMLHttpRequest对象。如果不支持，则创建 ActiveXObject：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

② 向服务器发送请求:

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 ·         method：请求的类型；GET 或 POST ·         url：文件在服务器上的位置 async：true（异步）或 false（同步）//请看<3同步异步>
send(string)	将请求发送到服务器。 ·         string：仅用于 POST请求,get的时候send()无参数

③ GET请求:

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

④ POST请求:

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

方法	描述
setRequestHeader(header,value)	向请求添加 HTTP 头。 ·         header: 规定头的名称 ·         value: 规定头的值

 

3. 选POST还是GET ?

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

·        无法使用缓存文件（更新服务器上的文件或数据库）

·        向服务器发送大量数据（POST 没有数据量限制）

·        发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠(例如网站登录验证)

举几个例子来感受一下:

-     GET请求,发送请求时,参数会直接跟在url的后面:

在百度中搜索ajax,观察到地址栏中”ajax”字样直接跟在了url后面:

试想一下,注册时输入用户名和密码若直接能看到会多不安全!

-     POST请求时,会把数据放置在HTTP请求包的包体中:

比如我在百度记事本中随意打了很多字,提交之后观察post请求.

4. 同步异步

通俗来讲:

普通B/S模式（同步）AJAX技术（异步）

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

所以 :

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open("GET","ajax_test.asp",true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

·        在等待服务器响应时执行其他脚本

·        当响应就绪后对响应进行处理

 

4. 请求发送之后服务端应该怎样做处理?

url发送之后,我们来到这个url所指向的服务service的代码(.net实现).

可能url中会附一些参数(或者是post,直接通过send()函数发送参数),我们可能想通过这个service在数据库中查找数据或者插入数据等等.那么怎样接收通过请求发送过来的数据呢?

① get请求:

Js客户端代码:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();//get无需发送附加数据则send null.

C#服务端代码:

String result= HttpContext.Current.Request[VarName]
//or
String result= HttpContext.Current.Request.QueryString [VarName]
// VarName为”fname”则变量result = “Bill”, VarName为”lname”则变量result = “Gates”

② post请求[非html form表单post]:

Js客户端代码:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.send("fname=Bill&lname=Gates");

C#服务端代码:

String result= HttpContext.Current.Request[VarName]
// VarName为”fname”则变量result = “Bill”, VarName为”lname”则变量result = “Gates”

③ post请求[html form表单post]:

Js客户端代码:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

Asp服务端代码:

String result= HttpContext.Current.Request.Form [VarName]
// VarName为”fname”则变量result = “Bill”, VarName为”lname”则变量result = “Gates”

5. 服务端运行完毕又传回了数据想显示在前端怎么办?

试想一下这种情况,用户在前端一个input[type=text]中输入了一个姓名,想查找这个姓名的所有有关信息,并且展示在前端.

当查找按钮按下时会发生以下事情:

1. 获取inout的值

2. 发送ajax 请求

3. 服务端asp开始接收input的值并开始在数据库中sql查找

4. 服务端将查找结果放进response.

那么前端js代码怎样来接收这个response中的查找结果内容呢?

在检测到xmlhttp的状态改变时,用xmlhttp.responseText来取response中的值.

阅读并理解如下函数

function showHint(str)
{
var xmlhttp;
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

xmlhttp.onreadystatechange到底是什么呢?

请阅读如下材料:

http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp

 

6. 完整实例

http://www.w3school.com.cn/ajax/ajax_asp_php.asp

http://www.w3school.com.cn/example/ajax_examples.asp

7. 用js库来实现ajax

关于ajax请求的实现,不仅可以用js原生代码来实现,还可以用一些当下流行的js库,比如大名鼎鼎的jquery,和企业开发常用的ExtJS

各种框架的语法不相同:

比如jquery的ajax请求跟原生js相比是这样的:

http://www.cnblogs.com/amboyna/archive/2009/08/06/1540077.html

大概写法长这样:

写法简单,代码很少

----------------------------------------------------------

ExtJS是这样的:

http://www.cnblogs.com/lipan/archive/2011/12/09/2272793.html