jQuery에서 ajax의 사용과 캐싱 문제에 대한 해결책

이 글에서는 주로 Ajax의 사용법과 jQuery의 캐싱 문제에 대한 솔루션을 소개합니다. 도움이 필요한 친구들이 이곳에 와서 참고할 수 있기를 바랍니다.

1: GET 액세스 브라우저가 멱등성이라고 생각합니다

있습니다. 동일한 URL에 대해 단 하나의 결과만 [동일하다는 것은 전체 URL 문자열이 정확히 일치한다는 것을 의미합니다]
따라서 두 번째 방문에서 URL 문자열이 변경되지 않으면 브라우저가 첫 번째 방문의 결과를 직접 가져옵니다

POST는 변경 액세스로 간주됩니다(브라우저는 POST 제출이 변경되었음에 틀림없다고 믿습니다)

GET의 멱등적 액세스를 방지하려면 URL 뒤에 추가하면 됩니다. new Date();, [간단히 말하면 방문할 때마다 URL 문자열이 달라집니다.]

웹 페이지를 디자인할 때도 이 원칙을 따라야 합니다

2 : Ajax Get과 Post의 차이점에 대해 이야기하기

Get 메소드:
get 메소드는 간단한 데이터를 전송할 수 있지만 크기가 평균은 1KB로 제한되며 데이터는 URL에 추가되어 전송됩니다(HTTP 헤더 전송). 즉, 브라우저는 각 양식 필드 요소와 해당 데이터를 요청 라인의 리소스 경로 끝에 다음 형식으로 추가합니다. URL 매개변수 가장 중요한 것은 클라이언트의 브라우저에 캐시되어 다른 사람들이 브라우저 기록에서 계좌 번호, 비밀번호 등과 같은 고객의 데이터를 읽을 수 있다는 것입니다. 따라서 어떤 경우에는 get 메소드가 심각한 보안 문제를 일으킬 수 있습니다.

Post 방법:
POST 방법을 사용할 때 브라우저는 각 양식 필드 요소와 해당 데이터를 웹 서버에 개체 콘텐츠로 보냅니다. 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. application/ x-www-form-urlencode에 대한 헤더는 서버가 엔터티에 매개변수 변수가 있음을 확인합니다. 일반적으로 SetRequestHeader("Context-Type", "application/x-www-form-urlencoded;") XmlHttpRequest 객체가 사용됩니다. 예:

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. 예: xmlHttp.send(name ); get 메소드인 경우 직접 xmlHttp.send(null);

4. 서버측 요청 매개변수는 Get과 Post를 구별합니다. get 메소드인 경우 $username = $_GET["username"]; post 메소드인 경우 $username = $_POST["username"];

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에 의해 처리되지 않으면 왜곡된 문자도 생성됩니다.

$.ajax 캐시되지 않은 버전:

$.ajax({
   type:"GET"
    url:'test.html',
    cache:false,
    dataType:"html",
    success:function(msg){
        alert(msg);
    }
 });

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 

这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。 

$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。 

注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。 

当设置 datatype 类型为 'script' 的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。 

$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。 

jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。(这个我不是很懂)

参数列表：

名 类型 描述 

url  String (默认: 当前页地址) 发送请求的地址。 

type String (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 

timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 

async  Boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 

beforeSend  Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

function (XMLHttpRequest) {
 this; // the options for this ajax request
}

cache  Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 

complete  Function 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。

function (XMLHttpRequest, textStatus) {
 this; // the options for this ajax request
}

contentType  String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 

data  Object,

String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 

dataType  String 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

error  Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) {
 // 通常情况下textStatus和errorThown只有其中一个有值 
 this; // the options for this ajax request
}

global  Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件：

ifModified  Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。 

processData  Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 

success  Function 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态

function (data, textStatus) {
 // data could be xmlDoc, jsonObj, html, text, etc...
 this; // the options for this ajax request
}

这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。 

请认真阅读上面的参数列表，如果你要用jQuery来进行Ajax开发，那么这些参数你都必需熟知的。

示例代码，获取博客园首页的文章题目： 

$.ajax({ 
type: "get", 
url: "http://www.cnblogs.com/rss", 
beforeSend: function(XMLHttpRequest){ 
//ShowLoading(); 
}, 
success: function(data, textStatus){ 
$(".ajax.ajaxResult").html(""); 
$("item",data).each(function(i, domEle){ 
$(".ajax.ajaxResult").append("
"+$(domEle).children("title").text()+"
");
});
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
},
error: function(){
//请求出错处理
}
});

jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。 

设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

jQuery 代码:

$.ajaxSetup({ 
url: "/xmlhttp/", 
global: false, 
type: "POST" 
}); 
$.ajax({ data: myData });

serialize() 与 serializeArray() ：

serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据

以上就是本章的全部内容，更多相关教程请访问jQuery视频教程！