Ajax

来源：互联网发布：思学通软件怎么样编辑：程序博客网时间：2024/06/03 23:00

============================================

escape();方法处理中文问题

encodeURI();url编码 encodeURI(encodeURI()); 两次编码也可以解决中文问题

decodeURI();url解码

注意FireFox下区分对象的大小写！！

GET 请求方式

============================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        xmlHttp.onreadystatechange = handleStateChange; //请求状态改变事件触发handleStateChange功能
        xmlHttp.send(null);   //如果是 GET 方式 send(null)
    }
    function handleStateChange(){
        if(xmlHttp.readyState == 4){    //表示请求状态 4为完成
                if(xmlHttp.status == 200){ //http状态指示码，200表示ok
                             results(xmlHttp.responseText)
                    }
            }
            else loading();
    }
    function loading()
    {//数据未加载完成时
        document.getElementById("dv").innerHTML = "loading...";
    }
    function results(objs)
    {//返回结果
        document.getElementById("dv").innerHTML = objs;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input id="Button1" type="button" onclick="requestURL('MyHandler.ashx?name=songyongbo');" value="button" />
<div id="dv"></div>
    </form>
</body>
</html>

====================================================

POST 方式：后台在取参数时不要用Request.QueryString而要用Request.Form

====================================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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" type="text/javascript">
    //escape(); 处理中文问题
    var xmlHttp;
    function createXMLHttpRequest() { //创建一个xmlHttpRequest对象
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
    }
    function requestURL(url, parameters){
        createXMLHttpRequest();
        xmlHttp.open("POST", url, true); //采用get方法提交数据 true 表示异步交互 false 为传统的同步交互
        xmlHttp.onreadystatechange = handleStateChange; //请求状态改变事件触发handleStateChange功能
        xmlHttp.setRequestHeader("Content-Length",parameters.length);//post提交设置项
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");// 设置头部，以表单form形式提交
        xmlHttp.send(parameters);//如果是 GET 方式 send(null)
    }
    function handleStateChange(){
        if(xmlHttp.readyState == 4){    //表示与服务器交互时候成功
                if(xmlHttp.status == 200){ //http状态指示码，200表示ok
                             results(xmlHttp.responseText)
                    }
            }
            else loading();
    }
    function loading()
    {//数据未加载完成时
        document.getElementById("dv").innerHTML = "loading...";
    }
    function results(objs)
    {//返回结果
        document.getElementById("dv").innerHTML = objs;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input id="Button1" type="button" onclick="requestURL('MyHandler.ashx','name=songyongbo');" value="button" />
<div id="dv"></div>
    </form>
</body>
</html>

====================================================

JQuery Ajax 用法

====================================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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" type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script language="javascript" type="text/javascript">
        //最简单的方式：
        function simpleRequest(){
            $("#dv").load("MyHandler.ashx?type=simpleRequest");
        }
        //GET方式
        function doRequestUsingGet(){
            $.get("MyHandler.ashx","type=doRequestUsingGet",callBack);
        }
        //POST方式
        function doRequestUsingPost(){
            $.post("MyHandler.ashx","type=doRequestUsingPost",callBack);
        }
        //细节设置 GET方式
        function allDoRequestUsingGet(){
            $.ajax({
                type:"GET",
                url:"MyHandler.ashx",
                data:"type=allDoRequestUsingGet",
                success:callBack
            });
        }
        //细节设置 POST方式
        function allDoRequestUsingPost(){
            $.ajax({
                type:"POST",
                url:"MyHandler.ashx",
                data:"type=allDoRequestUsingPost",
                success:callBack
            })
        }
        //全局设置写法
        $.ajaxSetup({
            url:"MyHandler.ashx",
            type:"GET",
            success:callBack
        });
        function overallRequest(){
            $.ajax({
                data:"type=overallRequest"
            });
        }
        //回调函数
        function callBack(date){
            $("#dv").html(date);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input id="Button1" type="button" onclick="simpleRequest();" value="Simple" />
    <input id="Button2" type="button" onclick="doRequestUsingGet();" value="GET" />
    <input id="Button3" type="button" onclick="doRequestUsingPost();" value="POST" />
    <input id="Button4" type="button" onclick="allDoRequestUsingGet();" value="ALLGET" />
    <input id="Button5" type="button" onclick="allDoRequestUsingPost();" value="ALLPOST" />
    <input id="Button6" type="button" onclick="overallRequest();" value="overall" />
    <div id="dv"></div>
    </form>
</body>
</html>

============================================================

Ajax 异步调用 .net WebService POST请求方式，GET请求方式未测试通过(似乎不支持)

============================================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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" type="text/javascript">
    var xmlHttp;
    function createXMLHttpRequest() { //创建一个xmlHttpRequest对象
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
    }
    function requestURL(url,serverMethod, parameters){
        createXMLHttpRequest();
        url += "/" + serverMethod;
        xmlHttp.open("POST", url, true); //采用get方法提交数据 true 表示异步交互 false 为传统的同步交互
        xmlHttp.onreadystatechange = handleStateChange; //请求状态改变事件触发handleStateChange功能
        xmlHttp.setRequestHeader("Host", "localhost:1384");
        xmlHttp.setRequestHeader("Content-Length",parameters.length);//post提交设置项
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");// 设置头部，以表单form形式提交
        xmlHttp.send(parameters);//如果是 GET 方式 send(null)
    }
    function handleStateChange(){
        if(xmlHttp.readyState == 4){    //表示与服务器交互时候成功
                if(xmlHttp.status == 200){ //http状态指示码，200表示ok
                             results(xmlHttp.responseText)
                    }
            }
            else loading();
    }
    function loading()
    {//数据未加载完成时
        document.getElementById("dv").innerHTML = "loading...";
    }
    function results(objs)
    {//返回结果
        document.getElementById("dv").innerHTML = objs;
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <input id="Button1" type="button" onclick="requestURL('MyWebService.asmx','MyName','str=songyong');" value="button" />
        <div id="dv"></div>

</form>
</body>
</html>
----------------------------------------------------------------------------------------------------------------

WebService 内容

----------------------------------------------------------------------------------------------------------------

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

/// <summary>
/// MyWebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyWebService : System.Web.Services.WebService {

public MyWebService () {

        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

    [WebMethod]
    public string MyName(string str)
    {
        return str + "bo";
    }
}

============================================================================

Ajax 异步调用 .net WebService SOAP 1.2 请求方式

============================================================================

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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" type="text/javascript">
    var xmlHttp;
    function createXMLHttpRequest() { //创建一个xmlHttpRequest对象
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
    }
    function requestURL(url, serverMethod, parmName, parmValue){
        createXMLHttpRequest();
        var data = '<?xml version="1.0" encoding="utf-8"?>';
        data += '<soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">';
        data += '<soap12:Body>';
        data += '<'+ serverMethod +' xmlns="http://tempuri.org/">';
        data += '<'+parmName+'>'+parmValue+'</'+parmName+'>';
        data += '</'+ serverMethod +'>';
        data += '</soap12:Body>';
        data += '</soap12:Envelope>';
        xmlHttp.open("POST", url, true); //采用get方法提交数据 true 表示异步交互 false 为传统的同步交互
        xmlHttp.onreadystatechange = handleStateChange; //请求状态改变事件触发handleStateChange功能
        xmlHttp.setRequestHeader("Host", "localhost:1384");
        xmlHttp.setRequestHeader("Content-Length",data.length);//post提交设置项
        xmlHttp.setRequestHeader("Content-Type","application/soap+xml; charset=utf-8");// 设置头部，以表单form形式提交
        xmlHttp.send(data);//如果是 GET 方式 send(null)
    }
    function handleStateChange(){
        if(xmlHttp.readyState == 4){    //表示与服务器交互时候成功
                if(xmlHttp.status == 200){ //http状态指示码，200表示ok
                             results(xmlHttp.responseText)
                    }
            }
            else loading();
    }
    function loading()
    {//数据未加载完成时
        document.getElementById("dv").innerHTML = "loading...";
    }
    function results(objs)
    {//返回结果
        //alert(objs);
        document.getElementById("dv").innerHTML = objs;
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <input id="Button1" type="button" onclick="requestURL('http://localhost:1384/test/MyWebService.asmx', 'MyName', 'str', 'songyong');" value="button" />
        <div id="dv"></div>

</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------

WebService 内容

---------------------------------------------------------------------------------------------------------------------

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

public MyWebService () {

        //如果使用设计的组件，请取消注释以下行
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

    [WebMethod]
    public string MyName(string str)
    {
        return str + "bo";
    }
}
==========================================================================