Js实现异步刷新(原创)
??????????看了ajax的一些資料，稍微學到了一點東西，于是寫出來與大家分享，由于讀的資料比較少和自己的看法可能不全面，再加上自己的拙筆，如果不小心寫錯，還請大家
??? 諒解
??? 一.ajax理論敘述
????????? ajax并不是一個新技術，它只是幾項技術的巧妙組合，讓它們協同發揮作用，從而達到異步刷新的效果，實際上就是不用刷新頁面就能實現與服務器的交互。這一特點
??? 要歸功與XMLHTTP組件和XMLHttpRequest對象.
???????? 異步更新原理:用XMLHTTP發送請求得到服務器端應答數據，在不重新載入整個頁面的情況下，用js操作Dom最終更新頁面
??????? ajax歷史介紹：最早應用于XMLHTTP的是微軟，IE(IE5,IE6)通過允許開發人員在web頁面內部使用XMLHTTP Active組件擴展自身的功能，這樣以來，開發人員就可以
??? 不用從當前頁面導航而直接向服務器傳輸數據或者從服務器上獲得數據。Mozilla,Konqueror,Opera等的回應是：創建它自己的繼承XML代理類--XMLHttpRequest,對于大
??? 多數情況XMLHttpRequest對象和XMLHTTP組件很相似(方法和屬性也類似,只是有一小部分屬性不支持)?.
??? 二.示例
?頁面StartXmlHttpRequestChuanZhi.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StartXmlHttpRequestChuanZhi.aspx.cs" Inherits="XmlHttpRequestTest.StartXmlHttpRequestChuanZhi" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
??? <title></title>
??? <script language="javascript">
??? var userName;??
??? var passWord;??
??? var xmlHttpRequest;???
??? //XmlHttpRequest對象??
??? function createXmlHttpRequest(){??
??????? if(window.ActiveXObject){ //如果是IE
??????????? return new ActiveXObject("Microsoft.XMLHTTP");??
??????? }else if(window.XMLHttpRequest){ //非IE瀏覽器??
??????????? return new XMLHttpRequest();??
??????? }??
??? }???
??? function onLogin(){??
??????? var url = "http://localhost:1638/LoginService.aspx?username=123&password=456";
??????? //1.創建XMLHttpRequest組建??
??????? xmlHttpRequest = createXmlHttpRequest();??
??????????
??????? //2.設置回調函數??
??????? xmlHttpRequest.onreadystatechange = HuiDiaoFun;??
??????????
??????? //3.初始化XMLHttpRequest組建??
??????? xmlHttpRequest.open("post",url,true);??
??????????
??????? //4.發送請求??
??????? xmlHttpRequest.send(null);????
??? }????????
??? //回調函數??
??? function HuiDiaoFun(){??
??????? if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
??????????? var b = xmlHttpRequest.responseText;
??????????? if (b == "true") {
??????????????? alert("請求數據成功!");
??????????? }
??????????? else {
??????????????? alert("請求數據失敗!");
??????????? }
??????? }??
??? }?
??? </script>
</head>
<body >
??? <form id="form1" runat="server">
??? <div>
??????????? <input id="btnRequest" type="button" value="請求數據"? οnclick="onLogin()"/></div>
??? </form>
</body>
</html>
頁面LoginService.aspx
?前臺:
??? <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoginService.aspx.cs" Inherits="XmlHttpRequestTest.LoginService" %>
?后臺:
?
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace XmlHttpRequestTest
{
??? public partial class LoginService : System.Web.UI.Page
??? {
??????? protected void Page_Load(object sender, EventArgs e)
??????? {
??????????? string username = Request.QueryString["username"].ToString();
??????????? string password = Request.QueryString["password"].ToString();
??????????? if (username.Trim() == "123" && password.Trim() == "456")
??????????? {
??????????????? Response.Write("true");
??????????? }
??????????? else
??????????? {
??????????????? Response.Write("false");
??????????? }
??????? }
??? }
}
示例說明:1.源碼不再詳細講解，有疑問可以直接問百老師和谷老師。
???????????? 2.當然這里只列出了比較常用的一種與服務器交互的方式,XMLHTTPRequest還可以請求XML,txt,ashx等文件
轉載于:https://www.cnblogs.com/liangjie/archive/2011/03/21/1990349.html
總結
以上是生活随笔為你收集整理的Js实现异步刷新(原创)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【布局优化】基于人工鱼群算法实现充电桩布
- 下一篇： 动态网页技术（二）