jQuery Ajax 분석 백과사전-JS 튜토리얼-php.cn

jQuery Ajax 분석 백과사전

php中世界最好的语言

풀어 주다： 2018-04-24 15:01:03

원래의

1278명이 탐색했습니다.

이번에는 jQuery Ajax에 대한 전체 분석을 가져왔습니다. jQuery Ajax 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Ajax란 무엇입니까

Ajax기본 개념

Ajax(Asynchronous JavaScript 및 XML): 중국어로 번역하면 비동기 JavaScript 및 XML이 됩니다.

기능적으로는 전체 웹 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있는 기술입니다.

기존 웹 페이지

콘텐츠를 업데이트하거나 양식을 제출하려면 페이지를 다시 로드하거나 새로 고쳐야 합니다.

Ajax 기술을 사용하는 웹 페이지

는 백그라운드 서버를 통해 소량의 데이터를 교환하며 웹 페이지는 비동기 부분 업데이트를 달성할 수 있습니다.

Ajax가 등장하기 전

Ajax 기술이 등장하기 전에는 동기식 상호작용의 세계였습니다.

동기화: 클라이언트가 요청을 보내고, 서버가 이를 처리한 후 응답합니다. 이 기간 동안 클라이언트는 서버가 응답 처리를 완료하면 페이지를 다시 로드합니다. 올바르지 않습니다. 클라이언트는 요청을 다시 시작하고 여기서 기다립니다.

Ajax 등장 이후

Ajax 등장 이후 세상은 변화하여 비동기식 세계가 되었습니다.

그렇다면 이전에는 왜 비동기식을 사용하지 않았을까요? XMLHttpRequest 객체가 하나 빠졌기 때문입니다. 이 객체가 등장하기 전에는 웹 개발에서 동기 방식을 사용했는데, 이후에는 비동기 작업이 가능하다는 것을 알게 되었습니다. 객체가 사용됩니다. 백그라운드와 서버 간에 데이터가 교환되며 이 데이터 교환은 전체 페이지를 다시 로드하지 않습니다. 이 경우 페이지를 새로 고치지 않고도 로컬 데이터를 업데이트할 수 있습니다. 이 객체는 Ajax 비동기 로딩 부분 새로 고침을 수행할 수 있습니다.

Ajax의 비동기 로딩 부분 새로 고침 기능 구현

1. 첫 번째 질문은 XHR 객체를 사용하는 방법입니다

1) 먼저 XMLHttpRequest를 인스턴스화합니다

var request = new XMLHttpRquest();

참고: 대부분 이제 브라우저는 XMLHttpRequest 개체와 새로운 메서드를 지원하지만 IE6 이하 시대에서는 XHR은 ActiveXObject일 뿐입니다

솔루션:

Var request; 
If(window.XMLHttpRequest){ 
Reuest = new XMLHttpRequest(); 
}else{ 
Request = new ActiveXObject(“Microsoft.XMLHTTP”); 
}

로그인 후 복사

2) 요청:

그 전에 살펴보겠습니다. HTTP 요청이란

컴퓨터가 네트워크를 통해 통신하는 규칙입니다.

은 연결에 대한 관련 정보를 유지하지 않는 상태 비저장 프로토콜입니다.

클라이언트가 서버에 요청을 보내고 서버가 응답한 다음 연결이 닫힙니다.

완전한 HTTP 요청에는 7단계가 있습니다

A. TCP 연결 설정

B. 클라이언트가 서버에 요청 명령을 보냅니다

C. 브라우저가 요청 헤더를 보냅니다

D. 서버가 응답합니다

E. 서버가 응답 헤더를 보냅니다

F. 서버 브라우저에 데이터 보내기

G. 서버가 TCP 연결을 닫습니다

따로 살펴보면 HTTP 요청은 네 부분으로 나뉩니다

HTTP 요청의 방법과 동작(get, pos) )

요청하는 URL(요청 주소)

요청 헤더(클라이언트 환경 정보, 인증 정보 등 포함)

요청 본문, 요청 본문.

요청 받기: 일반적으로 정보를 얻는 데 사용됩니다(http 기본 요청 방법)

Url传参属性和值都是可见的，对所发内容大小有限制一般在2000个字符

get请求安全的说法是因为你请求一次和请求一万次效果是一样的不会对数据造成影响。

Post请求：一般用于服务器数据修改

对所发信息没有大小限制

HTTP响应有三部分

1)一个数字和文字组成的状态吗，用来显示请求是成功还是失败

2)响应头，和请求头信息一样包含很多信息，例如服务器类型，日期时间，内容类型和长度等

3)响应体，响应正文

HTTP响应状态吗由三位数字组成，首位数字定义了状态码的类型：

1xx：信息类，表示接收到浏览器请求，正在进一步处理

2xx:成功表示用户请求被正确接受

3xx:重定向，表示没有请求成功，客户必须采取进一步的动作

4xx:客户端错误，表示客户端请求有错误404NOTFound意味着请求中所引用的文档不存在

5xx：服务器错误，表示服务器不能完成对请求的处理

通过XMLHttpRequest发送请求

1.创建

var request = new XMLHttpRquest();

2.发送请求

两个方法：

open(method,url,async),Send(string)这两种方法可以将请求发送到服务器

Request.open(get,get.php,true)
Request.Send()
Request.open(post,post.PHP,true) 
Request.Send()
Request.open(post,post.php,true) 
Request.setRequestHeader(‘Content-Type','application/x-www-form-urlencoded') 
Request.send(“name=王二狗&sex=男”);

로그인 후 복사

send()中的内容是要向后台传递的参数，在get请求是通过url传递参数，所以get中send()里面的内容可以省略，post方式中不能省略，省略了之后就是无意义的请求了

setRequestHeader是用来设置请求参数的类型，form

3.获取响应

responseText:获取字符串形式的响应式数据

responseXML:

Status和statusText：以数字和文本形式返回HTTP状态吗

getAllResponseHeader():获取所有的响应报头

getResponseHeader():查询相应中的某个字段的值

在响应返回成功时得到的通知，在实际操作中要监听

readyState属性的变化，他的变化代表着服务器相应的变化

0：表示服务器请求未初始化，open还没有被调用

1：服务器连接已经建立，open已经被调用

2：请求已经被接受，接收到头部信息

3：处理中，接收到相应主体

4：请求完成，并且响应完成

Var request=new XMLHttpRequest();
Request.open(get,url,true)
Request.send();
request.onreadyState=function(){
 If(request.readeyState===4&&request.Status===200){
 做一些事情 request.responseText
 }
}

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！