web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例

浏览数：37 / 时间：2015年06月09日

()post

http://04101334.iteye.com/blog/637695/

()get

function serializeElement(element) {
var method = element.tagName.toLowerCase();
var parameter = input(element);

if (parameter) {
var key = encodeURIComponent(parameter[0]);
if (key.length == 0) return;

if (parameter[1].constructor != Array)
parameter[1] = [parameter[1]];

var values = parameter[1];
var results = [];
for (var i=0; i<values.length; i++) {
results.push(key + ‘=‘ + encodeURIComponent(values[i]));
}
return results.join(‘&‘);
}
}

function serializeForm(formId) {
var elements = getElements(formId);
var queryComponents = new Array();

for (var i = 0; i < elements.length; i++) {
var queryComponent = serializeElement(elements[i]);
if (queryComponent)
queryComponents.push(queryComponent);
}

return queryComponents.join(‘&‘);
}

http://04101334.iteye.com/blog/637695/

() get,post 的区别

http://blog.csdn.net/zygsee/article/details/5264103

http://bbs.phpchina.com/thread-138396-1-1.html 一般不用get 而用post的原因

学习 Ajax 那么多的理论，这里有两个不错的 Ajax Post 与 Get 的实例，让我们去学习下吧。

先是学习 Ajax 的 Post，程序效果请参看 Ajax 的 Post 传值。

01
<html>

02
<head>

03
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

04
<title>Ajax Post 传值</title>

05
</head>

06
 
07
<script language="javascript">

08
function saveUserInfo()

09
{

10
    //获取接受返回信息层

11
    var msg = document.getElementById("msg");

12
 
13
    //获取表单对象和用户信息值

14
    var f = document.user_info;

15
    var userName = f.user_name.value;

16
    var userAge   = f.user_age.value;

17
    var userSex   = f.user_sex.value;

18
 
19
    //接收表单的URL地址

20
    var url = "ajax_output1.php";

21
 
22
    //需要POST的值，把每个变量都通过&来联接

23
    var postStr   = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

24
 
25
    //实例化Ajax

26
    //var ajax = InitAjax();

27
 
28
 
29
    var ajax = false;

30
    //开始初始化XMLHttpRequest对象

31
    if(window.XMLHttpRequest)

32
    {   //Mozilla 浏览器

33
        ajax = new XMLHttpRequest();

34
        if (ajax.overrideMimeType)

35
        {   //设置MiME类别

36
            ajax.overrideMimeType("text/xml");

37
        }

38
    }

39
    else if (window.ActiveXObject)

40
    {   // IE浏览器

41
        try

42
        {

43
            ajax = new ActiveXObject("Msxml2.XMLHTTP");

44
        }

45
        catch (e)

46
        {

47
            try

48
            {

49
                ajax = new ActiveXObject("Microsoft.XMLHTTP");

50
            }

51
            catch (e) {}

52
         }

53
    }

54
    if (!ajax)

55
    {   // 异常，创建对象实例失败

56
        window.alert("不能创建XMLHttpRequest对象实例.");

57
        return false;

58
    }

59
 
60
    //通过Post方式打开连接

61
    ajax.open("POST", url, true);

62
 
63
    //定义传输的文件HTTP头信息

64
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

65
 
66
    //发送POST数据

67
    ajax.send(postStr);

68
 
69
    //获取执行状态

70
    ajax.onreadystatechange = function()

71
    {

72
        //如果执行状态成功，那么就把返回信息写到指定的层里

73
        if (ajax.readyState == 4 && ajax.status == 200)

74
        {

75
            msg.innerHTML = ajax.responseText;

76
        }

77
    }

78
}

79
</script>

80
 
81
<body >

82
<div id="msg"></div>

83
<form name="user_info" method="post" action="">

84
姓名：<input type="text" name="user_name" /><br />

85
年龄：<input type="text" name="user_age" /><br />

86
性别：<input type="text" name="user_sex" /><br />

87
<input type="button" value="提交表单" onClick="saveUserInfo()">

88
</form>

89
</body>

90
</html>

然后是 Ajax 的 Get，用途是从服务器获取值。

程序效果请参看 Ajax 的 Get 传值。

01
<html>

02
<head>

03
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

04
<title>Ajax Get 传值</title>

05
</head>

06
 
07
<script language="javascript">

08
function saveUserInfo()

09
{

10
    //获取接受返回信息层

11
    var msg = document.getElementById("msg");

12
 
13
    //获取表单对象和用户信息值

14
    var f = document.user_info;

15
    var userName  = f.user_name.value;

16
    var userAge   = f.user_age.value;

17
    var userSex   = f.user_sex.value;

18
 
19
    //接收表单的URL地址

20
    var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

21
 
22
    //实例化Ajax

23
    //var ajax = InitAjax();

24
 
25
    var ajax = false;

26
    //开始初始化XMLHttpRequest对象

27
    if(window.XMLHttpRequest)

28
    {

29
        //Mozilla 浏览器

30
        ajax = new XMLHttpRequest();

31
        if (ajax.overrideMimeType)

32
        {//设置MiME类别

33
            ajax.overrideMimeType("text/xml");

34
        }

35
    }

36
    else if (window.ActiveXObject)

37
    {   // IE浏览器

38
        try

39
        {

40
            ajax = new ActiveXObject("Msxml2.XMLHTTP");

41
        }

42
        catch (e)

43
        {

44
            try

45
            {

46
                ajax = new ActiveXObject("Microsoft.XMLHTTP");

47
            } catch (e) {}

48
        }

49
    }

50
    if (!ajax)

51
    {  

52
        // 异常，创建对象实例失败

53
        window.alert("不能创建XMLHttpRequest对象实例.");

54
        return false;

55
    }              

56
 
57
    //通过Post方式打开连接

58
    ajax.open("GET", url, true);

59
 
60
    //发送GET数据,已经在URL中赋了值所以send那里只要加个空参.

61
    ajax.send(null);

62
 
63
    //获取执行状态

64
    ajax.onreadystatechange = function()

65
    {

66
        //如果执行状态成功，那么就把返回信息写到指定的层里

67
        if (ajax.readyState == 4 && ajax.status == 200)

68
        {

69
            msg.innerHTML = ajax.responseText;

70
        }

71
    }

72
}

73
</script>

74
 
75
<body>

76
<div id="msg"></div>

77
<form name="user_info" method="post" action="">

78
<input type="text" name="user_name" style="display:none;" />

79
<input type="text" name="user_age" style="display:none;" />

80
<input type="text" name="user_sex" style="display:none;" />

81
<input type="button" value="获取服务器变量" onClick="saveUserInfo()">

82
</form>

83
</body>

ajax_output2.php

1
<?

2
     $user_name = "Gonn";

3
     echo $user_name;

4
     $user_age = "24";

5
     echo $user_age;

6
     $user_sex = "Man";

7
     echo $user_sex;

8
?>

http://www.nowamagic.net/ajax/ajax_ExamplesOfPostAndGet.php