ajax_javascript 기술에서 get과 post의 설명, 사용법 및 차이점

이전에는 Ajax를 자세히 연구하지 않았는데, 그냥 사용하다가 문제를 발견하고 해결책을 찾았습니다.

1. Ajax Get과 Post의 차이점에 대해 말하자면
Get 메소드:
간단한 데이터를 전송하기 위해 get 메소드를 사용하지만 일반적으로 데이터 크기가 1KB로 제한되어 있습니다. 즉, 브라우저는 URL 매개변수 형식으로 요청 라인의 리소스 경로 끝에 각 양식 필드 요소와 해당 데이터를 추가합니다. 가장 중요한 것은 클라이언트의 브라우저에 캐시되어 다른 사람들이 브라우저 기록에서 계좌 번호, 비밀번호 등과 같은 고객의 데이터를 읽을 수 있다는 것입니다. 따라서 어떤 경우에는 get 메소드가 심각한 보안 문제를 일으킬 수 있습니다.
Post 메서드:
POST 메서드를 사용할 때 브라우저는 각 양식 필드 요소와 해당 데이터를 HTTP 메시지의 매개변수가 아닌 HTTP 메시지의 엔터티 콘텐츠로 웹 서버에 보냅니다. URL 주소 전송, POST 방식을 사용하여 전송되는 데이터의 양은 GET 방식을 사용하는 것보다 훨씬 큽니다.
간단히 말하면 GET 방식은 적은 양의 데이터를 전송하고 처리 효율성이 높으며 보안성이 낮고 캐시되지만 POST의 경우 그 반대입니다.

get 메소드를 사용할 때 다음 사항에 유의하세요. :
1 get 요청(또는 URL 전달 매개변수와 관련된 모든 항목)의 경우 전달된 매개변수는 먼저 encodeURIComponent 메소드에 의해 처리되어야 합니다. 예: var url = "update.php?username=" encodeURIComponent(username) "&content=" encodeURIComponent
(content) "&id=1" ;
Post 메소드 사용 시 주의하세요 :
1. 헤더의 Context-Type을 application/x-www-form-urlencode로 설정하여 서버가 엔터티에 매개변수 변수가 있음을 알 수 있도록 합니다. 일반적으로 SetRequestHeader("Context-Type", "application) XmlHttpRequest 개체의 /x-www-form-urlencoded"가 사용됩니다."). 예:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
2. 매개변수는 일대일 이름/값 대응을 갖는 키-값 쌍입니다. . 각 값 쌍은 앰퍼샌드로 구분됨을 사용합니다. 예를 들어 var name=abc&sex=man&age=18, var name=update.php?
abc&sex=man&age=18 및 var name=?abc&sex=man&age에 유의하세요. =18은 모두 잘못되었습니다.
3. 매개변수는 Send(매개변수) 메소드로 전송됩니다. 예: xmlHttp.send(name); get 메소드인 경우 직접 xmlHttp.send(null); 4. 서버측 요청 매개변수는 Get과 Post를 구별합니다. get 메소드인 경우 $username = $_GET["username"]; post 메소드인 경우 $username = $_POST["username"]; Post 및 Get 메소드는 다음과 같습니다
:
1. Post가 데이터를 전송할 때 URL에 표시할 필요는 없지만, Get 메소드는 URL에 표시되어야 합니다.
2.Post는 2M에 달하는 대용량 데이터를 전송하는 반면, Get 메소드는 URL 길이 제한으로 인해 약 1024바이트만 전송할 수 있습니다. 3.Post는 이름에서 알 수 있듯이 전송하는 것입니다. Get은 서버 세그먼트에서 데이터를 얻기 위한 것입니다. Get도 데이터를 전송할 수 있는 이유는 Post 정보가 http 요청의 내용으로 사용된다는 것을 서버에 알려주기 위한 것입니다. Get은 전송된 Http 헤더에 있습니다. get 메소드는 Request.QueryString["strName"]을 사용하여 수신합니다.
post 메소드는 Request.Form["strName"]을 사용하여 수신합니다.
참고:
두 가지 제출 방법을 통합할 수 있지만 , Request("strName ")를 사용하여 제출된 데이터를 가져오지만 이는 프로그램 효율성에 영향을 미치므로 권장되지 않습니다.
일반적으로 양식을 제출할 때 Get 메서드를 사용하지 마세요. 보안 문제가 발생할 수 있으므로


AJAX 잘못된 코드 문제

잘못된 코드의 원인:
1. xtmlhttp에서 반환된 데이터의 기본 문자 인코딩은 utf-8입니다. 클라이언트 페이지가 gb2312 또는 기타 인코딩된 데이터인 경우 잘못된 문자가 생성됩니다. 2. 게시물에서 제출된 데이터의 기본 문자 인코딩 방법은 utf-8입니다. 서버가 gb2312인 경우 그렇지 않으면 다른 인코딩된 데이터가 잘못된 문자를 생성합니다

해결 방법은
:
1. 클라이언트가 gb2312 인코딩인 경우 출력을 지정합니다. 서버의 스트림 인코딩
2. 서버 측 클라이언트와 클라이언트 모두 utf-8 인코딩을 사용합니다. gb2312:header('Content-Type:text/html;charset=GB2312') utf8: header('Content-Type:text/html;charset=utf -8');
참고: 위의 방법을 수행했지만 여전히 잘못된 문자를 반환하는 경우 해당 방법이 get 요청인지 확인하세요. URL 전달 매개변수 포함), 전달된 매개변수는 먼저 encodeURIComponent 메소드로 처리되어야 합니다. encodeURIComponent로 처리되지 않으면 왜곡된 문자도 생성됩니다.
제가 찾은 예는 다음과 같습니다. 제가 쓴 건 비교적 간단하고 표준적이지 않아서 다른 분들이 쓴 글을 참고하시는 게 좋을 것 같아요, 하하!




코드 복사

코드는 다음과 같습니다.

var http_request = false;
함수 makePOSTRequest(url, 매개변수) {
http_request = false;
if (window.XMLHttpRequest) { // 모질라, 사파리,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// 예상되는 콘텐츠 유형에 따라 유형을 설정합니다
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('XMLHTTP 인스턴스를 생성할 수 없습니다.');
거짓을 반환합니다.
}
http_request.onreadystatechange = AlertContents;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", 매개변수.length);
http_request.setRequestHeader("연결", "닫기");
http_request.send(매개변수);
}
function AlertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
결과 = http_request.responseText;
document.getElementById('myspan').innerHTML = 결과;
} else {
alert('요청에 문제가 있습니다.');
}
}
}
function get(obj) {
var poststr = "mytextarea1=" encodeURI( document.getElementById("mytextarea1").value )
"&mytextarea2= " encodeURI( document.getElementById("mytextarea2").value );
makePOSTRequest('post.php', poststr);
}

post.php
一个超大文本框textarea里面有大数据，ajaxcommunication过URL请求service返回结果，URL 이리면에서 4000도의 글자가 텍스트 영역의 리면통 URL에 나와 있습니다.求city是没有问题。 提交给测试的时候问题来了，测试人员은IE下side发现问题，textarea里face字符长島超过2000（大概数据）时，会报JS错误，ajax没有返回值给前台。 看原先代码：

复主代码 代码如下:

function getJsonData(url)
{
var ajax = Common.createXMLHttpRequest();
ajax.open("GET",url,false);
ajax.send(null);
시도해 보세요
{
eval("var s = " ajax.responseText);
s를 반환합니다;
}
catch(e)
{
return null;
}
}
function getData(){
var url="BlacklistService.do?datas=" datasvalue;
var result = getJsonData(url);
}

网上google发现解决办法： 修改使用的XMLHttp的请求为POST，并且把参数와URL分离且来提交。 修改后代码다운로드:

复主代码 代码如下:

function getJsonData(url,para)
{
var ajax = Common.createXMLHttpRequest ();
ajax.open("POST",url,false);
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(para);
해 보세요
{
eval("var s = " ajax.responseText);
s를 반환합니다;
}
catch(e)
{
return null;
}
}
function getData(){
var url="BlacklistService.do";
var para="datas=" datasvalue;
var result = getJsonData(url,para);
}

================================
get 요청 메서드와 post 요청 메서드의 유사점과 차이점 Ajax 2008년 10월 4일 토요일 오후 2시 37분 Ajax에서는 get 요청과 post 요청을 자주 사용합니다. 응답하기 전에 언제 사용할까요? 먼저 get과 post의 차이점을 이해합니다.
1. Get은 제출된 양식의 ACTION 속성이 가리키는 URL에 매개변수 데이터 대기열을 추가합니다. 값은 일대일 형식으로 각 필드에 해당합니다. URL에서 볼 수 있습니다. Post는 HTTP 게시 메커니즘을 사용하여 양식의 각 필드와 해당 콘텐츠를 HTML HEADER에 배치하고 이를 ACTION 속성이 가리키는 URL 주소로 전송합니다. 사용자는 이 프로세스를 볼 수 없습니다.
2. get 메소드의 경우 서버측에서는 Request.QueryString을 사용하여 변수 값을 가져옵니다. post 메소드의 경우 서버측에서는 Request.Form을 사용하여 제출된 데이터를 가져옵니다. 요청을 사용하여 두 가지 방법으로 매개변수를 얻을 수 있습니다.
3. get으로 전송되는 데이터의 양은 작으며 2KB를 초과할 수 없습니다. 우편으로 전송되는 데이터의 양은 상대적으로 크며 일반적으로 기본적으로 제한이 없습니다. 하지만 이론적으로는 서버마다 다릅니다.
4. get의 보안은 매우 낮지만 post의 보안은 높습니다.
5.

는 와 동일합니다. 즉, 메소드가 get인 경우 작업 페이지 끝에 있는 매개변수 목록이 무시되고 ="post" action= "a.asp"> 또한 Get 요청에는 다음과 같은 특징이 있습니다. 일반적으로 물음표?를 사용하여 이러한 방식으로 URL에 데이터를 추가하고 서버에 전달합니다. URL 주소의 끝과 데이터 매개변수의 시작을 나타냅니다. 다음 매개변수의 각 데이터 매개변수는 "이름 = 값"의 형태로 나타나며, 매개변수는 커넥터 &로 구분됩니다. Post 요청은 다음과 같은 특징을 가지고 있습니다. 데이터는 HTTP 본문에 배치되며 & 연결 방법 및 구분 기호 방법을 포함하여 여러 가지 방법으로 구성됩니다. 매개변수를 숨기고 많은 양의 데이터를 전송할 수 있습니다. 더 편리합니다. 위의 설명을 통해 이제 get을 사용해야 할 때와 post 메소드를 사용해야 할 때를 대략적으로 이해하게 되었습니다. 게시물을 사용하세요. 전달된 값이 매개변수 모드에서만 필요한 경우(값이 2KB보다 크지 않음) get 메소드를 사용하십시오. 이제 URL을 통해 요청을 보낼 때 get 메소드와 post 메소드의 차이점을 살펴보겠습니다. 다음 예를 사용하면 동일한 데이터를 GET과 POST를 통해 전송하는 것의 차이점을 쉽게 확인할 수 있습니다. 전송되는 데이터는 사용자 이름=Zhang San:

코드 복사 코드는 다음과 같습니다:

GET /?username=张三HTTP/1.1
수락: image/gif, image/x-xbitmap, image/jpeg, image/ pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
Accept-Language: zh-cn
Accept-Encoding: gzip, deflate
사용자 에이전트: Mozilla/4.0(호환; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
호스트: localhost
연결: Keep-Alive
POST 방법:
POST / HTTP /1.1
수락: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, */*
수락 언어: zh-cn
콘텐츠 유형: application/x-www-form-urlencoded
수락 인코딩: gzip, deflate
사용자 에이전트: Mozilla/4.0(호환; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)
호스트: localhost
콘텐츠 길이: 28
연결: Keep-Alive
username=张三

차이점은 하나입니다. 양식 매개변수와 값은 URL 요청에 첨부되고, 하나는 HTTP 요청의 메시지 엔터티에 있습니다. 위의 두 단락을 비교하면 GET 메서드는 이전 요청 헤더에 양식 콘텐츠를 넣는 반면, POST 메서드는 이러한 콘텐츠를 요청 본문에 넣는 동시에 요청의 Content-Type 헤더에 넣는다는 것을 알 수 있습니다. application/x-www-form-urlencoded에 설정되어 있습니다. 전송된 텍스트는 다음과 같이 양식 제출 텍스트를 구성할 수 있습니다. encodeURIComponent(arg1)=encodeURIComponent(value1)&encodeURIComponent(arg2)=encodeURIComponent(value2) &... ..참고: encodeURIComponent는 charstring의 내용을 포함하는 새로운 String 객체(유니코드 형식)를 반환합니다. 모든 공백, 구두점, 악센트 및 기타 비ASCII 문자는 %xx 인코딩으로 대체됩니다. 여기서 xx는 16진수와 같습니다. 문자 시스템 번호를 나타냅니다. 예를 들어 공백은 " "로 반환됩니다. 255보다 큰 문자 값은 %uxxxx 형식으로 저장됩니다. JavaScript의 encodeURIComponent() 메소드를 참조하십시오. 위 내용을 이해한 후 이제 ajax의 XMLHttpRequest 객체를 사용하여 각각 GET 및 POST 메소드를 사용하여 일부 데이터를 서버에 보냅니다.

GET 방식

코드 복사 코드는 다음과 같습니다

var postContent ="name=" encodeURIComponent("xiaocheng") "&email=" encodeURIComponent("xiaochengf_21@yahoo.com.cn")
xmlhttp.open("GET", "somepage" "?" postContent, true);

POST 방법

코드를 복사하세요 코드는 다음과 같습니다:

var postContent ="name=" encodeURIComponent("xiaocheng") "&email=" encodeURIComponent("xiaochengf_21@yahoo .com.cn ");

xmlhttp.open("POST", "somepage", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") ;
//xmlhttp.setRequestHeader("Content-Type", "text/xml"); //xml 파일이 전송된 경우
xmlhttp.send(postContent)



GET
:

코드 복사

코드는 다음과 같습니다. < !-- var xmlHttpRequest function createXMLHttpRequest(){ 시도

{

// Firefox, Opera 8.0, Safari
xmlHttpRequest =new XMLHttpRequest();
}
catch(e)
{

// Internet Explorer
시도
{
xmlHttpRequest=new ActiveXObject("Msxml2. XMLHTTP");
}
catch (e)
{

try
{
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("귀하의 브라우저는 AJAX를 지원하지 않습니다! ");
false 반환;
}
}
}

}
//요청 함수 보내기
function sendRequestPost(url,param){
createXMLHttpRequest();
xmlHttpRequest.open("GET",url "?" param,true)
xmlHttpRequest.onreadystatechange = processResponse;
}//반환 정보 처리
함수 processResponse(){
if(xmlHttpRequest.readyState == 4){
if(xmlHttpRequest.status == 200){
var res = xmlHttpRequest.responseText
window.alert(res);
}else{
window.alert("요청 페이지 예외")
}
}
}
//인증 함수
function userCheck(){
var userName = document.loginForm.username.value;
var psw = document.loginForm.password.value;
if(userName == ""){
window.alert("사용자 이름은 비어 있을 수 없습니다." );
document.loginForm.username.focus();
return false;
}
else{
var url = "Servlet/userLogin_do"
var param = "userName =" userName "&psw=" psw;
sendRequestPost(url,param);
}
}
// -->
< mce: script type="text/javascript">



POST
:

코드 복사
코드는 다음과 같습니다.

GET 메소드는 주소 표시줄에 따라 매개변수를 구문 분석하고, post는 sendRequestPost(url,param);의 매개변수 문자열에 따라 매개변수를 구문 분석하는 것을 볼 수 있습니다. POST 메소드를 open()에 추가해야 합니다. 메소드 뒤에 xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")를 추가해야 합니다. 초보자입니다. 추가하면 매개변수를 전달할 수 있습니다. 나중에 공부하겠습니다.