步步为营-77-Ajax简介
AJax:異步JavaScript和XML.Asynchronous JavaScript and XML
優點:無刷新
1?JavaScript下的Ajax
1.1 XMLHttpRequest對象 使用ajax有一個很重要的對象XMLHttpRequest,而該對象的創建方式
var?xhr?=?new?XMLHttpRequest();//常用
var?xhr =? new ActiveXObject("Microsoft.XMLHTTP");//(低版本的ie)
1.2 XMLHttpRequest對象的方法 new創建對象 ?open創建請求? ?send發送請求 1.3?根據以上三種方法,readyState對應五種狀態0 1 2 3 4 new?=> 0?=>?open?=> 1?=>?send?=>2=>?正在接收服務端返回的數據... 3 =>數據接受完畢 4 1.4?Open()?和Send() 方法 1.4.1?get請求 //參數1:請求方式 參數2:請求地址,可帶參數(?name='zhangsan') 參數3:是否是異步請求 xhr.open("get", "01JavaScript下的Ajax.aspx.cs",true); xhr.Send(); 1.5??回調函數:當服務器將數據返回給瀏覽器后,自動調用該方法 xhr.onreadystatechange <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="01JavaScript下的Ajax.aspx.cs" Inherits="AjaxTest._01JavaScript下的Ajax" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script>function checkVal(txt) {if (txt.value == ""){alert("用戶名不能為空!");return;}var xhr;if (XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("get", "01JavaScript下的Ajax.aspx?name=" + txt.value, true);xhr.send();//回調函數:當服務器將數據返回給瀏覽器后,自動調用該方法xhr.onreadystatechange = function () {if (xhr.readyState ==4) {if (xhr.status == 200) {alert(xhr.responseText);return;}}}}</script> </head> <body><form id="form1"><%--當用戶名失去焦點時候,檢驗用戶是否存在--%>用戶名:<input type="text" id="UserName" value="" οnblur="checkVal(this)" /><br />密碼:<input type="text" id="UserPwd" /></form> </body> </html> Ajax using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;namespace AjaxTest {public partial class _01JavaScript下的Ajax : System.Web.UI.Page{public void Page_Load(object sender, EventArgs e){if (Request["name"]!=null){if (Request["name"] == "張三"){Response.Write("用戶名已占用");Response.End();}else{Response.Write("恭喜你,用戶名可以使用");} }}} } 后臺
1.6?post請求
? xhr.open("post", "01JavaScript下的Ajax.aspx", true);
??????????? xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
??????????? xhr.send("name=" + txt.value);
2?通常我們是直接使用jQuery來完成Ajax請求的
?2.1?JQuery下的get請求
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="http://localhost:58888/JQuery/jquery-1.7.1.min.js"></script><script>$(function () {$("#UserName").blur(function () {if ($("#UserName").val() == "") {alert("用戶名不能為空!");return;}//Ajax異步請求$.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },//回調函數 function (date) {alert(date);});});});</script> </head> <body>用戶名:<input type="text" id="UserName" value="" οnblur="checkVal(this)" /><br />密碼:<input type="text" id="UserPwd" /> </body> </html> jQuery下的Get2.2 JQuery下的post請求===非常簡單
將???? $.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
改為 $.post("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
2.3?JQuery下的另一種寫法
? //Ajax異步請求---方法二
??????????????? $.ajax({
??????????????????? type: "post",
??????????????????? url: "02JQuery下的Ajax.ashx",
??????????????????? data: "name=" + $("#UserName").val() + "&pwd=" + $("#UserPwd").val(),
??????????????????? success: function (msg) {
??????????????????????? alert(msg);
??????????????????? }
??????????????? });
?2.4 將Ajax的結果 返回出函數
function GetReSumBYIDs(OuGUID, CcID, BiID) {var yearRem;$.ajax({url: "../Ashx/GetBudgetRemainingZLDC.ashx?OrgUnitGUID=" + OuGUID + "&CostCenterID=" + CcID + "&BudgetItemID=" + BiID,type: "POST",data: {},dataType: "text",async: false,//這里選擇異步為false，那么這個程序執行到這里的時候會暫停，等待//數據加載完成后才繼續執行 success: function (result) {yearRem = result;}, error: function (msg) {//出錯 }});return yearRem;} View Code?
?
轉載于:https://www.cnblogs.com/YK2012/p/7041629.html
總結
以上是生活随笔為你收集整理的步步为营-77-Ajax简介的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android studio ERROR
- 下一篇： 网站如何集成百度UEditor编辑器