AJax技术

Ajax学习小记

字号+ 作者:H5之家 来源:H5之家 2017-11-05 18:00 我要评论( )

AJAX简介AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味

Ajax学习小记

逝去日子的博客 2014-10-22 117 阅读

c# ajax

AJAX简介

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

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属性.

测试程序 GET方法 <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajax</title> <script type="text/javascript"> var xmlhttp = null; var console = null; function openAjax() { console = document.getElementById("console"); if (xmlhttp == null) { createXMLHttpRequest(); } var val = document.getElementById("txt").value; xmlhttp.open("GET", "ajaxcheck.aspx?name=" + val, true); xmlhttp.onreadystatechange = xmlHttpChange; xmlhttp.send(null); document.getElementById('resultSpan').innerHTML = '正在检查,请稍候...'; } function createXMLHttpRequest() { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } } function xmlHttpChange() { toConsole(xmlhttp.readyState) if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var res = xmlhttp.responseText; document.getElementById('resultSpan').innerHTML = res; } } } function toConsole(data) { if (console != null) { var newline = document.createElement("div"); console.appendChild(newline); var txt = document.createTextNode(data); newline.appendChild(txt); } } </script> </head> <body> <form id="form1" runat="server"> <div> 用户名:<input type="text" value="Sandy" onblur="openAjax();" /> <span id="resultSpan"></span> <div id="console"></div> </div> </form> </body> </html>

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>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • ajax mvc3 razor 分页

    ajax mvc3 razor 分页

    2017-10-30 17:01

  • C#+Ajax+Post

    C#+Ajax+Post

    2017-05-14 12:05

  • C#学习之路

    C#学习之路

    2017-05-13 08:00

  • C# Ajax局部更新技术 需要使用的控件ScriptManageramp;Upda

    C# Ajax局部更新技术 需要使用的控件ScriptManageramp;Upda

    2017-05-11 16:02

网友点评
/