步步为营-77-Ajax简介
AJax:異步JavaScript和XML.Asynchronous JavaScript and XML
優(yōu)點(diǎn):無(wú)刷新
1?JavaScript下的Ajax
1.1 XMLHttpRequest對(duì)象 使用ajax有一個(gè)很重要的對(duì)象XMLHttpRequest,而該對(duì)象的創(chuàng)建方式
var?xhr?=?new?XMLHttpRequest();//常用
var?xhr =? new ActiveXObject("Microsoft.XMLHTTP");//(低版本的ie)
1.2 XMLHttpRequest對(duì)象的方法 new創(chuàng)建對(duì)象 ?open創(chuàng)建請(qǐng)求? ?send發(fā)送請(qǐng)求 1.3?根據(jù)以上三種方法,readyState對(duì)應(yīng)五種狀態(tài)0 1 2 3 4 new?=> 0?=>?open?=> 1?=>?send?=>2=>?正在接收服務(wù)端返回的數(shù)據(jù)... 3 =>數(shù)據(jù)接受完畢 4 1.4?Open()?和Send() 方法 1.4.1?get請(qǐng)求 //參數(shù)1:請(qǐng)求方式 參數(shù)2:請(qǐng)求地址,可帶參數(shù)(?name='zhangsan') 參數(shù)3:是否是異步請(qǐng)求 xhr.open("get", "01JavaScript下的Ajax.aspx.cs",true); xhr.Send(); 1.5??回調(diào)函數(shù):當(dāng)服務(wù)器將數(shù)據(jù)返回給瀏覽器后,自動(dòng)調(diào)用該方法 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();//回調(diào)函數(shù):當(dāng)服務(wù)器將數(shù)據(jù)返回給瀏覽器后,自動(dòng)調(diào)用該方法xhr.onreadystatechange = function () {if (xhr.readyState ==4) {if (xhr.status == 200) {alert(xhr.responseText);return;}}}}</script> </head> <body><form id="form1"><%--當(dāng)用戶名失去焦點(diǎn)時(shí)候,檢驗(yàn)用戶是否存在--%>用戶名:<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("恭喜你,用戶名可以使用");} }}} } 后臺(tái)
1.6?post請(qǐng)求
? xhr.open("post", "01JavaScript下的Ajax.aspx", true);
??????????? xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
??????????? xhr.send("name=" + txt.value);
2?通常我們是直接使用jQuery來(lái)完成Ajax請(qǐng)求的
?2.1?JQuery下的get請(qǐng)求
<!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異步請(qǐng)求$.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },//回調(diào)函數(shù) 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請(qǐng)求===非常簡(jiǎn)單
將???? $.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
改為 $.post("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
2.3?JQuery下的另一種寫法
? //Ajax異步請(qǐng)求---方法二
??????????????? $.ajax({
??????????????????? type: "post",
??????????????????? url: "02JQuery下的Ajax.ashx",
??????????????????? data: "name=" + $("#UserName").val() + "&pwd=" + $("#UserPwd").val(),
??????????????????? success: function (msg) {
??????????????????????? alert(msg);
??????????????????? }
??????????????? });
?2.4 將Ajax的結(jié)果 返回出函數(shù)
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，那么這個(gè)程序執(zhí)行到這里的時(shí)候會(huì)暫停，等待//數(shù)據(jù)加載完成后才繼續(xù)執(zhí)行 success: function (result) {yearRem = result;}, error: function (msg) {//出錯(cuò) }});return yearRem;} View Code?
?
轉(zhuǎn)載于:https://www.cnblogs.com/YK2012/p/7041629.html
總結(jié)
以上是生活随笔為你收集整理的步步为营-77-Ajax简介的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Android studio ERROR
- 下一篇： H5之前端操作文件