首页 > 技术文章 > ajax的get和post的不同

ck-999 2016-05-17 17:14 原文

1.给服务器传递数据量

get传递较小,受限于浏览器

post原则没有限制

2.安全方面

post传递数据较安全

3.传递数据的形式不一样

get方式在url地址后边以请求字符串形式传递参数

http://网址/index.php?name=tom&age=23&addr=beijing

蓝色部分就是请求字符串,就是一些“名-值”对,中间使用&符号连接

post方式是把form表单的数据给请求出来以xml形式传递给服务器

 

一、get请求注意事项:

火狐浏览器会把传递的“中文”get参数信息给自动编码处理,但IE浏览器不会

 

ajax之get请求需要注意的两个地方:

1。在url地址后边以请求字符串(传递的get参数信息)形式传递数据

2.对中文、=、&等特殊符号处理

 

对特殊信息的处理:

在浏览器里通过get参数传递一些特殊符号信息会被误解混淆,例如& =等。为了避免特殊符号被误解产生歧义,需要对其进行编码处理。

1.在php里边可以函数urlencode()/urldecode()对特殊符号进行编码,反编码处理(url_encode()可以把中文转变为浏览器可以识别的信息。编码后的信息为%号后接两个十六进制数)

2.在javascript里边可以通过encodeURLComponent()对特殊符号等信息进行编码。

(编码后的信息可以被正常接收使用,无需反编码。)

 

具体可以被编码的特殊符号:

(encodeURLComponent编码)

字符        特殊字符的含义URL编码

#    用来标志特定的文档位置%23

%     对特殊字符进行编码%25

&    分隔不同的变量值对%26

+    在变量值中表示空格%2B

\     表示目录路径%2F

=    用来连接键和值%3D

?     表示查询字符串的开始%3F

汉字的每个字节单位转为为%两个十六进制数

 

【php代码(03.php)】

<?php

//接收get方式传递过来的“用户名”信息,并做数据库校验

print_r($_GET);

//连接数据库、通过sql语句验证

【php代码(04.php)】

1 <?php
2 
3 $subject="php&detail=html";
4 
5 $subject=urlencode($subject);
6 
7 echo "<a href='./03.php?sjt=$subject'>php0609</a>";

 

【html代码】

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7 function checkname(){
 8     //ajax方式用户名校验
 9     //1.获取用户名信息
10     var nm=document.getElementById('username').value;
11     
12     //对传递的特殊符号(例如&、=等)进行编码处理
13     //同时对“中文”也会进行编码处理
14     nm=encodeURIComponent(nm);
15     
16     //2.ajax校验
17     var hh=new XMLHttpRequest();
18     //ajax事件设置,以便接收返回的信息
19     hh.onreadystatechange=function(){
20             if(hh.readyState==4){
21                     alert(hh.responseText);
22                 }
23         }
24         hh.open('GET','./03.php?name='+nm+'&addr=beijing');
25         hh.send(null);
26     }
27 
28 </script>
29 </head>
30 
31 <body>
32     <h2>ajax之用户名的校验(get方式)</h2>
33     <p>用户名:<input type="text" id="username" onblur="checkname()" /></p>
34     <p>手机号码:<input type="text" id="usertel" /></p>
35 
36 </body>
37 </html>

 

二、post请求注意事项:

 

ajax之get请求需要注意的四个地方:

1.给服务器传递数据需要调用send(请求字符串数据)方法

2.调用setRequestHeader()把传递的数据组织为xml格式(模仿form表单传递数据)

3.传递的中文信息无需编码,特殊符号像&、=等,仍需编码

4.该方式请求的同时也可以传递get参数信息,同样适用$_GET接收该信息

 

(该代码有问题未解决)

【php代码】

 1 <?php
 2 
 3 //接收post方式传递过来的“用户名”信息,并做数据库校验
 4 echo "post:";
 5 print_r($_POST);
 6 
 7 echo "get:";
 8 print_r($_GET);
 9 
10 //连接数据库、通过sql语句验证

【html代码】

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript">
 7 function checkname(){
 8     //ajax方式用户名校验
 9     //1.获取用户名信息
10     var nm=document.getElementById('username').value;
11     
12     //对传递的特殊符号(例如&、=等)进行编码处理
13     //同时对“中文”也会进行编码处理
14     nm=encodeURIComponent(nm);
15     
16     //把用户名信息变为“请求字符串”
17     var info = "name"+nm+"&addr=beijing";
18     //2.ajax校验
19     var hh=new XMLHttpRequest();
20     //ajax事件设置,以便接收返回的信息
21     hh.onreadystatechange=function(){
22             if(hh.readyState==4){
23                     alert(hh.responseText);
24                 }
25         }
26         hh.open('post','./03.php?color=red');
27         //post方式传递数据时模拟form表单传递数据
28         //form表单的post格式数据时通过xml形式传递给服务器的
29         hh.setRequestHeader("content-type","application/x-www-form-urlencoded");
30         
31         hh.send(info);
32     }
33 
34 </script>
35 </head>
36 
37 <body>
38     <h2>ajax之用户名的校验(post方式)</h2>
39     <p>用户名:<input type="text" id="username" onblur="checkname()" /></p>
40     <p>手机号码:<input type="text" id="usertel" /></p>
41 
42 </body>
43 </html>

 

出现问题:

 

经过一天的问题查找,发现是一个小细节错误:

应改为:  var info="name="+nm+"&addr=beijing"; //少了一个等号

 

同步请求和异步请求:

ajax对象.open(方式get/post,url地址,【异步true】【同步false】);

ajax是可以与服务器进行(异步或同步)交互的技术之一。

异步:同一个时间点允许执行多个进程(内容同时显示)

同步:同一个时间点只允许执行一个进程(内容显示有先后顺序)

 

什么时候使用同步请求:

ajax绝大多数情况下进行异步请求,但是有的时候也要使用“同步请求”(其不能被取代)

例如页面有两部分内容,ajax请求内容和正常的html内容输出,如果html的输出内容包括ajax请求的内容,就需要使得ajax请求完成了再进行html内容的输出,这样就要设置两者一前一后调用(而非同时调用),即要进行同步请求

 

推荐阅读