jQuery의 ajax technology_jquery에 대한 자세한 소개

1：Ajax技术包含以下几点：
基于Web标准(XHTML + CSS)的展示
使用DOM进行动态显示和交互
使用XMLHttpRequest进行数据交换和相关操作
使用javascript将所有内容绑定在一起
Ajax的核心是JavaScript的XMLHttpRequest对象，它是一种支持异步请求的技术。简而言之，使用JS可以控制XMLHttpRequest对象向服务器提出请求并处理响应，
而不影响用户对页面的正常访问。对于XMLHttpRequest对象，不同的浏览器提供了不同的支持，IE是将其作为ActiveX控件集成到浏览器中的，而其他主流的浏览器直接
作为一般的JS对象来创建。

2：JS中的Ajax

XMLHttpRequest对象的属性及简要说明

名称	说明
readyState	通信的状态，当XMLHttpRequest对象把一个HTTP请求发送到服务器，到接收到服务器响应信息，整个过程将经历5种状态，该属性取值为为0-4
onreadystatechange	设置回调事件处理程序，当readyState属性的值改变时，会激发此事件
responseText	服务器返回的text/html格式的文档
responseXML	服务器返回的text/xml格式的文档
status	描述了HTTP响应short类型的状态代码，100表示Continue, 101表示Switching protocols数据交换，200表示执行正常，404表示未找到页面，500表示内部程序错误
statusText	HTTP响应的状态代码对应的文本(OK, not found)

readyState属性代码

代码	说明
0	代表未初始化的状态。创建了一个XMLHttpRequest对象，尚未初始化
1	代表连接状态，已经调用了open方法，并且已经准备好发送请求
2	代表发送状态，已经调用了send方法发出请求，尚未得到响应结果
3	代表正在接收状态，已经接收了HTTP响应的头部信息，正在接收响应内容
4	代表已加载状态，此时响应内容已完全被接收

复主代码 代码如下:

< title>Ajax

< ;/body>

ajax.js적内容：

复代码 代码如下:

var xmlRequest;
function CreateRequest()
{
 /* 创建XMLHttpRequest对象 */
 if( window.ActiveXObject)
 {
  새 ActiveXObject("Microsoft.XMLHTTP") 반환;
 }
 else if(window.XMLHttpRequest)
 {
  새 XMLHttpRequest() 반환;
 }
}
function ResponseHandler()
{
 if(xmlRequest.readyState == 4 && xmlRequest.status == 200)
 {
  /* 如果信成功，并且响应正常 并且响应正常 执行以下操作, 执行以下操作 */ var reqcontent = xmlRequest.responsext; oxpore.getElementById ( "Browser"). innerHtml = reqContent; getElementById ( "content"). value = reqContent;
 }
}
function AjaxAccess()
{
 /* 异步请求百島首页 */

 xmlRequest = CreateRequest();  //创建XMLHttpRequest对象
 xmlRequest.onreadystatechange = ResponseHandler;  //设置回调函数
 xmlRequest.open("GET","http://www.baidu.com");  //初始化请求对象
 xmlRequest.send(null);   //发送请求信息

 /* 触发事件以后提示正在打开百島首页 */
 var brow = document.getElementById("browser");
 brow.innerHTML = "

正재打开百島搜索

";
}
window.onload = function()
{
 document.getElementById("Access").onclick = AjaxAccess;  //设置按扭单击事件
}

3：jQuery中的Ajax
$.ajax(options )방법
옵션은 "键/值"의 형식에 맞는 형식으로, 用于设置Ajax请求的参数, 如请求方式、请求URL、回调函数等。
常用属性如下：
url: 发送请求的地址
type:请求方式，GET和POST，默认为GET
timeout: 设置请求超时时间，该属性为数值型，单位为毫秒
data: 发送到服务器的数据，“键/值”对shape式，该属性可以是对象或者字符串，如果是对象，则自动转换为字符串
dataType:  预期服务器返回的数据类型，该属性为字符类型。可选值如下： xml、html：返回纯文本HTML信息，包含返回纯文本JS代码、json、jsonp、text
contentType:服务器时内容编码类型，该属性为字符串类型，默认值为"application/x-www-form-urlencoded"，一般不用设置，因为默认值适大合多数应用场合

보내기 전: 请求发送前的事件，该属性为其设置事件处理程序，可用于发送前修改XMLHttpRequest的参数，如头信息。

제조대码

代码如下:

function(XMLHttpRequest) {
this; /*여기서 이 키워드는 .ajax() 메소드의 옵션 매개변수 객체에 액세스하는 데 사용됩니다.*/
}
완료: 요청이 완료된 후 요청 성공 여부에 관계없이 이 이벤트가 발생합니다.
function(XMLHttpRequet, textStatus) {
this; /*여기서 이 키워드는 .ajax() 메소드의 옵션 매개변수 객체에 액세스하는 데 사용됩니다.*/
}
textStatus 매개변수는 실행 상태를 반환합니다. 현재 요청의 (성공 및 오류 등)
success: 요청이 성공적으로 실행되었을 때의 이벤트입니다.
function(data, textStatus) {
this; /*여기서 이 키워드는 .ajax() 메소드의 옵션 매개변수 객체에 액세스하는 데 사용됩니다*/
}
오류: 요청 실행 실패 시 이벤트
function(XMLHttpRequest, textStatus, errorThrown) {
this /*여기서 이 키워드는 .ajax() 메소드의 옵션 매개변수 객체에 액세스하는 데 사용됩니다*/
}
global: 전역 Ajax 이벤트를 실행할지 여부. 이 속성은 부울 유형이며 기본값은 false입니다

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

$(document).ready(function(){
$("#Access").click (function(){
var xmlReq = $.ajax({
유형:'GET',
url:'http://www.sougou.com',
성공:function(reqContent )
$ ("#browser").html(reqContent);
$("#content").text(reqContent);
}});
$("#browser") .html("< ;h1>Sogou 검색 열기");
});
});

4: 로드 방법
load(url, [data], [callback]);

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

< style type="text/ css">
body { padding:20px }
#commentList{ border:solid 2px #888; Overflow:auto; -bottom:solid 1px # ddd; margin-bottom:15px; 글꼴 크기:13px; }
#commentList div{ background:#eee; 888; 패딩:10px 0 0 0; }

답글 목록

< /html>



Load.js

 

코드 복사 코드는 다음과 같습니다. $(document).ready(function(){

$("#refresh").click(function(){

/* 액세스할 페이지의 URL은 실제 상황에 따라 수정하세요*/
var url = "http://www.sogou.com";
$("#commentList") .load(url); //해당 내용 로드
} );
});

5: $.get() 메소드
은 GET 메소드를 사용하는 전역 메소드입니다. 비동기 요청을 수행하는 경우 구문 형식은 다음과 같습니다.

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

         var xmlReq = $.get(url, [data], [callback], [type]);
         $.get("www.baidu.com",
            {
user: 'zhangsan'
             }
             );
         콜백: function(data, textStatus) {}

复system代码 代码如下:

사용자 로그인

사용자 이름:


비밀번호:
                                                 div>





Post.js





코드 복사


코드는 다음과 같습니다.

$(document).ready(function(){
$("#submit").click(function(){
$.post("http://localhost:2154/ Web/Login.aspx",
{
사용자 이름: $("input[name='username']").val(),
비밀번호: $("input[name='password'] ").val()
},
function(data){
$("#login").html(data);
});
});
});

Login.aspx

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

<%@ Page Language="C#" %>
환영합니다 <%= 요청 양식 [" 사용자 이름"] %>


귀하의 신원은 관리자


<버튼>정보 수정
<버튼>로그아웃

7: $.getJSON() 메서드
var xmlReq = $.getJSON(url, [data], [callback]);

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

<테이블 id="peoples" cellpacing="1">

이름나이성별< /td>

getJSON.js

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

$(document).ready(function(){
/* 비동기 요청, JSON 데이터 로드*/ /PeopleList.aspx",
function(data){
/* 요청 결과 탐색*/
$.each(data,
function(index, p){
var html = " " p.name "< ;/td>" p.age
"" (p.isMale ? "남성" : " 여성") " "
$("#peoples>tbody").append(html);
});
});
}) ;

PeopleList .aspx

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

<%@ Page Language="C#" %>
[{
"name" : "David li",
"age" : 61,
" isMale" : true
},{
"name" : "Michael Clinton",
"age" : 53,
"isMale" : true
},{
"name" : "Brook Ann",
" age" : 23,
"isMale" : false
},{
"name" : "Mary Johnson",
"age" : 35 ,
"isMale" : false
},{
"name" : "엘리자베스 존스",
"age" : 33,
"isMale" : false
},{
"name" : "James Smith" ,
"age" : 25세,
"isMale" : true
}]


8：$.getScript()방법
var xmlReq = $.getScript(url, [콜백]);

复aze代码 代码如下:

使용getScript()方法异步加载JavaScript文件

< input type="button" value="Button" id="input" />

getScript.js

复主代码 代码如下:

$(문서).ready(함수( ){
 $("#input").click(function(){
  $.getScript("Test.js", function(data){
   showMsg();
  });
 });
});

Test.js 

复system代码代码如下:

function showMsg(){
 alert("메시지입니다"); 
}

9：序列化表单数据
jQuery는 더 많은 问题，提供序列유기적인 방법表单数据的收集和格式化.

复aze代码 代码如下:

< tr>

사용자 이름:
나이:
성별 :	男         <옵션 값= "false">여자
이메일:
세부정보:
	<버튼 이름="btnSubmit">제출< ;/버튼>

< ;/html>

serialize.js 

复主代码 代码如下:

$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
$.post("http: //localhost:2154/Web/Register.aspx",
$("form").serialize(), //양식 데이터 직렬화
function(data){
$("table tbody" ) .append("" data "");
});
});
}); 🎜>

Register.aspx

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

<%@ Page Language="C#" %>
사용자 이름:<%= 요청["username"] %>


나이:<%= 요청["age"] %>


IsMale:<%= 요청["isMale"]%>


이메일:<%= 요청["email"]%>


세부정보:<%= 요청["details"]%>

10: serializeArray() 메소드
이 메소드는 페이지 양식을 JSON 구조 객체로 직렬화합니다. /value" 쌍 양식의 모든 요소 값을 캡슐화합니다. 이 메서드는 JSON 문자열이 아닌 JSON 개체를 반환한다는 점에 유의하세요.
JSON 개체의 구조는 다음과 같습니다.

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

                                                                                                                                 " , "값": "값2"},
                                                                                                            );
var textName = jsonData[ 0].이름;
var textValue = jsonData[0].value;




11: 전역 Ajax 기본 옵션 설정

애플리케이션에서는 많은 수 다양한 기능을 구현하기 위해 Ajax 메소드를 작성하는 경우가 많습니다. $.ajax() 메소드에는 매번 많은 수의 매개변수가 설정되는데, 이는 매우 불편합니다. jQuery는 $.ajaxSetup() 메소드를 제공하므로 을 설정할 수 있습니다. 전역 Ajax 기본 매개변수 항목. $.ajaxSetup([options]);


코드 복사

코드는 다음과 같습니다. $.ajaxSetup({ url: 'Test.html', type: 'POST',

global: false, //전역 이벤트 트리거 비활성화

dataType: 'json' ,
오류: 기능(xhr, textStatus, errorThrown) {
                                                                                                     ; 🎜>

ajaxComplete(callback); //요청이 완료되면 이 이벤트가 트리거됩니다.
ajaxError(callback) ; //요청에서 오류가 발생하면 이 이벤트가 트리거됩니다.
ajaxSend(callback); //요청이 전송됩니다. 이 이벤트는 요청이 발생하기 전에 트리거됩니다.
ajaxStart(callback); start
ajaxStop(callback); //요청이 종료되면 이 이벤트가 발생합니다.
ajaxSuccess(callback); //요청이 성공하면 트리거됩니다.
ajaxStart() 메서드 및 ajaxStop 메서드의 이벤트 핸들러 는 매개변수 없는 함수이고 나머지는 3개의 매개변수를 가질 수 있습니다. 구문 형식은 다음과 같습니다.

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

함수(Event, XHR, SETTINGS) {
EVENT는 트리거된 이벤트 객체입니다.
XHR은 XMLHTTPRequest 객체입니다.
설정은 Ajax 요청 구성 매개변수입니다.

<버튼 이름= "btnLoad">로드

AjaxGlobalEvent.js 

复代码 代码如下:

$(document).ready(function(){
 $("# show").ajaxStart(function(){
  $(this).append("

Run ajaxStart

");
 });
 $("#show") .ajaxStop(function(){
  $(this).append("

Run ajaxStop

");
 });

 $("#show") .ajaxComplete(function(){
  $(this).append("

Run ajaxComplete

");
 });

 $("#show") .ajaxError(function(){
  $(this).append("

Run ajaxError

");
 });

 $("#show") .ajaxSend(function(){
  $(this).append("

Run ajaxSend

");
 });

 $("#show") .ajaxSuccess(function(){
  $(this).append("

Run ajaxSuccess

");
 });
 $("button[name='btnLoad' ]").click(function(){ 
  $.get("http://www.sohu.com");
 }); 
});