아약스를 어떻게 사용하나요? Ajax 사용 사례 분석-JS 튜토리얼-php.cn

이 글에서는 주로 ajax의 사용 내역과 ajax의 사용 사례 분석을 소개합니다. 지금 이 글을 살펴보겠습니다

$.ajax() 메소드 사용 사례#🎜🎜 ## 🎜🎜#

jquery 파일을 가져와야 합니다. 이 경우 jquery-2.0.0.js

# #

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-2.0.0.js"></script>
<script type="text/javascript">
	$(function() {
		$("#submit").click(function() {
			$.ajax({
				url : "ajax.do",//请求的url
				type : "post",//请求方式
				data : {//传递的数据
					name : $("#name").val()
				},
				dataType : "text",//后台数据返回类型
				success : function(data) {//响应成功执行的方法
					alert(data);
				},
				error : function() {//出现异常执行方法
					alert("出现异常啦...");
				}

			});
		});
	});
</script>
</head>
<body>
	<form action="">
		用户名:<input type="text" name="name" id="name" /><br /> 
		<input type="button" id="submit" value="提交" />
	</form>
</body>
</html>

로그인 후 복사

$.ajax() 메서드는 아래에 자세히 설명되어 있습니다(w3school에서)

#🎜 🎜#jQuery ajax - ajax() 메서드

Example

AJAX를 통해 텍스트 조각 로드: #🎜 🎜#jQuery 코드:

@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet {	
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 请求中文乱码处理
		request.setCharacterEncoding("UTF-8");
		// 响应中文乱码处理
		response.setHeader("Content-Type", "text/html;charset=utf-8");
		// 接收数据
		String name = request.getParameter("name");
		System.out.println(name);
		// 测试出现异常，ajax会执行error
		// throw new IOException();
		PrintWriter out = response.getWriter();
		// 响应的信息
		out.write("成功啦...");
		out.flush();
		out.close();
	}
}

로그인 후 복사

HTML 코드:

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myp").html(htmlobj.responseText);
  });
});

로그인 후 복사

정의 및 사용법

#🎜🎜 ## 🎜🎜#

ajax() 메서드는 HTTP 요청을 통해 원격 데이터를 로드합니다.

이 메서드는 jQuery의 기본 AJAX 구현입니다. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 $.get, $.post 등을 참조하세요. $.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 유연성을 높이기 위해 덜 일반적으로 사용되는 옵션을 조작해야 하는 경우가 아니면 이 기능을 직접 조작할 필요가 없습니다.

가장 간단한 경우에는 $.ajax()를 매개변수 없이 직접 사용할 수 있습니다.

참고: 모든 옵션은 $.ajaxSetup() 함수를 통해 전역적으로 설정할 수 있습니다.

구문

<p id="myp"><h2>Let AJAX change this text</h2></p>
<button id="b01" type="button">Change Content</button>

로그인 후 복사

매개변수

설명

# 🎜 🎜#

settings

선택사항. Ajax 요청을 구성하는 데 사용되는 키-값 쌍 모음입니다.

모든 옵션의 기본값은 $.ajaxSetup()을 통해 설정할 수 있습니다.

参数

options
类型：Object

可选。AJAX 请求设置。所有选项都是可选的。
async
类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)
类型：Function

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

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
cache
类型：Boolean

默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。
complete(XHR, TS)
类型：Function

请求完成后回调函数 (请求成功或失败之后均调用)。

参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

这是一个 Ajax 事件。
contentType
类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。
context
类型：Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

就像这样：
```
$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});
```
로그인 후 복사
data
类型：String

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

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType
类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

error
类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。
global
类型：Boolean

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

서버 데이터가 변경된 경우에만 새 데이터를 가져옵니다. 기본값: 거짓. HTTP 패킷의 Last-Modified 헤더 정보를 사용하여 결정합니다. jQuery 1.4부터는 서버에 지정된 'etag'도 확인하여 데이터가 수정되지 않았는지 확인합니다.
jsonp
Type: String

jsonp 요청에서 반복 쓰기 콜백 함수의 이름입니다. 이 값은 "onJsonPLoad=?"가 서버에 전달되도록 하는 {jsonp:'onJsonPLoad'}와 같은 GET 또는 POST 요청에서 URL 매개변수의 "콜백" 부분을 대체하는 데 사용됩니다.
jsonpCallback
Type: String

jsonp 요청에 대한 콜백 지정 함수 이름. 이 값은 jQuery가 자동으로 생성한 임의의 함수 이름 대신 사용됩니다. 이는 주로 jQuery가 고유한 함수 이름을 생성하여 요청을 더 쉽게 관리하고 콜백 함수 및 오류 처리를 제공하는 데 사용됩니다. 브라우저가 GET 요청을 캐시하도록 하려는 경우 이 콜백 함수 이름을 지정할 수도 있습니다.
password
Type: String

은 HTTP에 응답하는 데 사용됩니다. 액세스 인증 요청된 비밀번호
processData
Type: Boolean

기본값 : 진실. 기본적으로 data 옵션을 통해 전달된 데이터가 객체인 경우(기술적으로 말하면 문자열이 아닌 한) 처리되어 기본 콘텐츠 유형인 "application/x와 일치하는 쿼리 문자열로 변환됩니다. -www-form-urlencoded" ". 변환하고 싶지 않은 DOM 트리 정보나 기타 정보를 보내려면 false로 설정하세요.
scriptCharset
Type: String

dataType이 요청된 경우에만 "jsonp" 또는 "script"이고 유형이 "GET"인 경우 문자 세트 수정을 강제하는 데 사용됩니다. 일반적으로 로컬 및 원격 콘텐츠 인코딩이 다른 경우에만 사용됩니다.
success
Type: Function

요청 성공 후 콜백 기능 .

Parameters: 서버에서 반환하고 dataType 매개변수에 따라 처리되는 데이터입니다. 상태를 설명하는 문자열입니다.

Ajax 이벤트입니다.
traditional
Type: Boolean

전통적인 방식을 사용하려는 경우 데이터를 직렬화하는 방법을 사용하고 이를 true로 설정합니다. Tools 카테고리의 jQuery.param 메소드를 참고하세요.
timeout
Type: Number

요청 시간 초과 설정(밀리초) ) ). 이 설정은 전역 설정을 재정의합니다.
type
Type: 문자열

기본값: "GET" ). 요청 방법("POST" 또는 "GET"), 기본값은 "GET"입니다. 참고: PUT 및 DELETE와 같은 다른 HTTP 요청 방법도 사용할 수 있지만 일부 브라우저에서만 지원됩니다.
url
Type: 문자열

기본값: 현재 페이지 주소 . 요청을 보낼 주소입니다.
username
Type: String

은 HTTP에 응답하는 데 사용됩니다. 액세스 인증 요청된 사용자 이름입니다.
xhr
Type: Function

XMLHttpRequest 객체를 반환해야 함 . 기본값은 IE에서는 ActiveXObject이고 그렇지 않으면 XMLHttpRequest입니다. 향상된 XMLHttpRequest 객체를 재정의하거나 제공하는 데 사용됩니다. 이 매개변수는 jQuery 1.3 이전에는 사용할 수 없었습니다.

콜백 함수

$.ajax를 처리하려는 경우 () 데이터를 얻으려면 beforeSend, error, dataFilter, Success 및 Complete와 같은 콜백 함수를 사용해야 합니다.

beforeSend

요청을 보내기 전에 호출하고 XMLHttpRequest를 매개변수로 전달하세요.

error

요청 오류가 발생할 때 호출됩니다. XMLHttpRequest 객체, 오류 유형을 설명하는 문자열 및 예외 객체(있는 경우) 전달

dataFilter

요청이 성공한 후 호출됩니다. 반환된 데이터와 "dataType" 매개변수의 값을 전달합니다. 그리고 성공 콜백 함수에 전달된 새 데이터(처리된 데이터)를 반환해야 합니다.

success

요청 후 호출되었습니다. 반환된 데이터와 성공 코드가 포함된 문자열을 전달합니다.

complete

이 함수는 성공 또는 실패에 관계없이 요청이 완료되면 호출됩니다. XMLHttpRequest 개체와 성공 또는 오류 코드가 포함된 문자열을 전달합니다.

Data type

$.ajax() 함수는 서버에서 제공하는 정보를 사용하여 처리합니다. 반환된 데이터. 서버가 반환된 데이터가 XML이라고 보고하는 경우 반환된 결과는 일반 XML 메서드나 jQuery 선택기를 사용하여 반복될 수 있습니다. HTML과 같은 다른 유형이 표시되면 데이터가 텍스트로 처리됩니다.

dataType 옵션을 통해 다른 데이터 처리 방법을 지정할 수도 있습니다. 간단한 XML 외에도 html, json, jsonp, 스크립트 또는 텍스트를 지정할 수도 있습니다.

그 중 text 및 xml 형식으로 반환된 데이터는 처리되지 않습니다. 데이터는 단순히 XMLHttpRequest의 responseText 또는 responseHTML 속성을 성공 콜백 함수에 전달합니다.

참고: 웹 서버에서 보고한 MIME 유형이 우리가 선택한 데이터 유형과 일치하는지 확인해야 합니다. 예를 들어 XML의 경우 일관된 결과를 얻으려면 서버에서 text/xml 또는 application/xml을 선언해야 합니다.

html 유형으로 지정하면 HTML이 문자열로 반환되기 전에 포함된 모든 JavaScript가 실행됩니다. 마찬가지로 스크립트 유형을 지정하면 서버 측에서 생성된 JavaScript가 먼저 실행된 후 스크립트가 텍스트 데이터로 반환됩니다.

json 형태로 지정하면 획득한 데이터를 자바스크립트 객체로 파싱하고 생성된 객체를 결과로 반환합니다. 이를 달성하기 위해 먼저 JSON.parse()를 사용하려고 시도합니다. 브라우저가 지원하지 않으면 함수를 사용하여 빌드합니다.

JSON 데이터는 JavaScript를 통해 쉽게 파싱할 수 있는 일종의 구조화된 데이터입니다. 획득한 데이터 파일이 원격 서버에 저장되어 있는 경우(다른 도메인 이름, 즉 도메인 간 데이터 수집) jsonp 유형을 사용해야 합니다. 이 유형을 사용하면 요청된 URL에 추가되는 쿼리 문자열 매개변수 callback=?이 생성됩니다. 유효한 JSONP 요청을 완료하려면 서버가 JSON 데이터 앞에 콜백 함수 이름을 추가해야 합니다. 기본 콜백 대신 콜백 함수의 매개변수 이름을 지정하려면 $.ajax()의 jsonp 매개변수를 설정하면 됩니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AJAX 개발 매뉴얼 열을 참조하세요.)

참고: JSONP는 JSON 형식의 확장입니다. 쿼리 문자열 매개변수를 감지하고 처리하려면 일부 서버 측 코드가 필요합니다.

script 또는 jsonp 유형이 지정되면 서버에서 데이터가 수신될 때 실제로 XMLHttpRequest 객체 대신

저자별 최신 기사