Ajax学习小记
逝去日子的博客 2014-10-22 117 阅读
c# ajax
AJAX简介AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest对象定义了用脚本操作HTTP的API,除了常用的GET请求,这个API还包含实现POST请求的能力,
同时他能用于文本或Document对象的形式返回服务器的响应.
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
status 200: “OK”404: 未找到页面
HTTP简介HTTP请求由四部分组成:
1.请求的方法或动作 “GET”,”POST”
2.请求的URL
3.可选的请求头集合.”User-Agent”,”Content-type”
4.请求主体
服务器返回的HTTP响应包含三部分:
1.一个数字和文字组成的状态码 “status”,404,200,301,302,403
2.一个响应头集合.
3.响应主体.
发起Http请求时调用XMLHttpRequest对象的open()方法.该方法必须指定两个部分,请求方法和URL,
request.open(method,’url’)
method可以使”POST”,也可以是”GET”.也可以是”DELETE”,”PUT”等
如果是POST请求的话必须要设置”Content-type”头来指定请求主题的MIME类型:
request.open(“POST”,”ajax_test.asp”,true);
request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
最后一步是指定可选的请求主体并向服务器发送,使用send()方法
request.send(null);
GET请求绝对没有主体,所有应该传递null或省略这个参数.POST请求通常拥有主体.
HTTP请求的各部分有指定顺序:请求方法和URL首先到达,然后是请求头,最后是请求主体.XMLHttpRequest实现通常知道调用send()方法猜开始启动网络.
一个完整的HTTP响应由状态码,响应头集合,响应主体.组成,这些都可以通过XMLHttpRequest对象的属性和方法使用.
XMLHttpRequest对象通常异步使用:发送请求后,send()方法立即返回,直到响应返回,前面列出的响应方法和属性才有效,为了在响应准备就绪时得到通知,必须监听XMLHttpRequest对象上的readystatechange事件
readyState是一个整数,它指定了HTTP请求的状态.
理论上,每次readyState属性改变都会触发readystatechange事件.实际中,当readyState改变为0或1时可能没有触发这个事件.所有事件处理程序应该一直检验readyState值.可以把事件处理函数设置为XMLHttpRequest对象的onreadystatechange属性.
ajaxcheck.aspx主要內容
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; namespace javascript { public partial class ajaxcheck : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string value = Request.QueryString["name"] == null ? "" : Request.QueryString["name"]; string str = DateTime.Now.ToLongDateString(); Response.Write(str + " " + value); } } } POST方法 <!DOCTYPE html> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My JavaScript</title> <script type="text/javascript"> var dzb="name=name" function loadXMLDoc() { 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"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } xmlhttp.open("POST", "WebForm1.aspx", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(dzb); } </script> </head> <body> <button type="button" onclick="loadXMLDoc()">请求数据</button> <div id="myDiv"></div> </body> </html>