QQ交流群：110826636

文档07_JavaScript_ajax

Ajax数据异步

示例

前台页面

View Code 
<%@ 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>

 

后台

View Code 
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();

                }

            }

        }

    }

}

 

 

练习代码文档下载

posted @ 2013-05-06 16:10  FourOne  阅读(221)  评论(0)  编辑  收藏  举报