jQuery의 ajax technology_jquery에 대한 자세한 소개-JS 튜토리얼-php.cn

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]);

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

Load

< 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代码代码如下:

Get

分类：

Get.js

复代码代码如下:

$(document).ready(function(){
 $("#Search").click(function(){

  /* 使用Get方式请求指정URL */
  $.get("http://localhost:2154/Web/BlogList.aspx",
  {
   키 : $("#blogClass").val()
  },
  기능(데이터){
   $("#blogList").html(data);
  });
 });

 $("# 검색").click();  //触发一次单击事件
});

BlogList.aspx

复主代码代码如下:

<%@ Page Language="C#" %>
<%
 /* 
 * 각각 배열에 일부 데이터를 추가합니다. 
 * 이러한 데이터는 일반적으로 from Database, 
 * 이것은 단지 시뮬레이션이며 정적으로 추가되었습니다. 
 */
 string[] blogClass = { "CSS", "CSS", ".NET", ".NET", ".NET " , ".NET" };
 string[] blogTitle = { "CSS 패딩", "CSS 소개", "C# 클래스", 
 "C# 기본 지식", "C# 객체 지향 ", "C# Design Pattern" };

 string key = Request["key"]; //요청 서버의 키워드 가져오기
 /*
 * 배열 컬렉션 순회
 */
 for (int i = 0; i < blogClass.Length; i )
 {
 /*
 * 키워드가 비어 있으면 모든 레코드를 표시합니다. 
 * 키워드가 카테고리 이름과 동일하면 이 카테고리에 기록을 표시합니다
                                                                                       ~                      ;> & Lt; 
 & lt;%= 블로그클래스 & lt; ;/span & lt;%= 블로그 제목 [i]%& gt; 
/div & div & gt; <; 데이터], [콜백], [유형]) ;
$.get() 메소드는 GET 모드로 데이터를 제출하며 모든 매개변수 정보는 URL에 추가됩니다. 웹 요청에는 일반적으로 URL 길이에 대한 특정 제한이 있으므로 $.get()에 의해 전달되는 데이터 길이는 메소드에도 특정 상한이 있습니다. 
$.post() 메소드는 메시지의 엔터티로 매개변수를 서버에 보냅니다. 데이터 길이는 영향을 받지 않습니다. 




코드 복사

코드는 다음과 같습니다.

< 제목>게시물

사용자 로그인

사용자 이름:

비밀번호:
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]);
코드 복사 코드는 다음과 같습니다.

getJSON

<테이블 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

使용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>

사용자 이름:
나이:
성별 :

이메일:
세부정보:
<버튼 이름="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 요청 구성 매개변수입니다.

AjaxGlobalEvent

<버튼 이름= "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");
});
});

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