ajax get和post的区别,ajax get post 区别 详解

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

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

01

02

03

content="text/html; charset=utf-8" />

04

Ajax Post

传值

05

06

07

08

function saveUserInfo()

09

{

10

//获取接受返回信息层

11

var msg =

document.getElementByIdx_x_x_x("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

80

81

82

id="msg">

83

action="">

84

姓名：

/>

85

年龄：

/>

86

性别：

/>

87

onClick="saveUserInfo()">

88

89

90

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

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

01

02

03

content="text/html; charset=utf-8" />

04

Ajax Get

传值

05

06

07

08

function saveUserInfo()

09

{

10

//获取接受返回信息层

11

var msg =

document.getElementByIdx_x_x_x("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

74

75

76

id="msg">

77

action="">

78

style="display:none;" />

79

style="display:none;" />

80

style="display:none;" />

81

onClick="saveUserInfo()">

82

83

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

?>