网页前端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();

[/code]

老版本的 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");
}

[/code]

② 向服务器发送请求:
如需将请求发送到服务器，我们使用 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");

[/code]

C#服务端代码:

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

[/code]

③ 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");

[/code]

Asp服务端代码:

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

[/code]

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();
}

[/code]

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相比是这样的:

/article/4746181.html

大概写法长这样:



写法简单,代码很少

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

ExtJS是这样的:

/article/5108168.html