文档07_JavaScript_ajax
Ajax数据异步
示例
前台页面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajaxTest.aspx.cs" Inherits="WebApplication1.ajaxTest" %> <!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 type="text/javascript"> //ajax //创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心 function object_ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { if (!xmlHttp) { alert('Cannot create XMLHTTP instance'); return null; } } } } return xmlHttp; } //GET方式提交 function object_ajaxGetRequest(ajaxObject,url, changeFunction) { ajaxObject.open('GET', url, true); ajaxObject.onreadystatechange = changeFunction; ajaxObject.send(null); } //POST方式提交 function object_ajaxPostRequest(ajaxObject, parameters, urlPage, changeFunction) { ajaxObject.open('POST', urlPage, true); ajaxObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajaxObject.onreadystatechange = changeFunction; ajaxObject.send(parameters);//注意键值对之间要有&符号 } var ajaxObject; //ajax接收状态检测 function bool_status(ajaxObject) { if (ajaxObject.readyState == 4 && ajaxObject.status == 200)//状态完成 { return true; } return false; } //test get function changeGet() { if(bool_status(ajaxObject)) document.getElementById("divget").innerHTML = ajaxObject.responseText; } //test post function changePost() { if (bool_status(ajaxObject)) document.getElementById("divpost").innerHTML = ajaxObject.responseText; } function OnAjaxGetTest() { var url = "ajaxTest.aspx?" + "method=get&name=getvalue"; if (!ajaxObject) ajaxObject = object_ajaxFunction(); if (!ajaxObject) return; //get object_ajaxGetRequest(ajaxObject, url, changeGet); } function OnAjaxPostTest() { var urlPage = "ajaxTest.aspx"; if (!ajaxObject) ajaxObject = object_ajaxFunction(); if (!ajaxObject) return; var parameters = "method=post&name=postvalue"; //post object_ajaxPostRequest(ajaxObject, parameters, urlPage, changePost); } //getData //XML /* function getXmlData(ajaxObject,XmlBody) { var bodyNodes=ajaxObject.responseXML.getElementsByTagName(XmlBody); } //JOSN function getJosnData(ajaxObject) { //将json格式字符转换为javascript对象 return JSON.parse(ajaxObject.responseText); }*/ </script> </head> <body> <form id="form1" runat="server"> <div style="background-color:blue;width:100px;height:100px;" onclick="OnAjaxGetTest()">get点击我</div> <div style="background-color:yellow;width:100px;height:100px;" onclick="OnAjaxPostTest()">post点击我</div> <div id="divget" style="border:1px solid #000"></div> <div id="divpost" style="border:1px solid #f00"></div> </form> </body> </html>
后台
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication1 { public partial class ajaxTest : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //Encoding myEncoding = Encoding.GetEncoding("gb2312"); if (!IsPostBack) { //string s = Request.RawUrl.ToString(); //get string s = Request.QueryString["method"];//get的取值方式 if (s == "get") { Response.Write(Request.QueryString["name"].ToString()); Response.End(); } string post=Request.Form["method"];//post的取值方式 if (post=="post") { Response.Write(Request.Form["name"].ToString()); Response.End(); } } } } }
因缘际会的相遇,自当有非同寻常的结局
QQ交流群:110826636