이번에는 편집자가 모두를 위해 AJAX의 지식 포인트를 jQuery로 정리했습니다. 다음은 지식 포인트를 요약한 것입니다.
1. AJAX 개념
Asynchronous Javascript And XML(asynchronous JavaScript and XML)
AJAX는 언어가 아니라 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술입니다.
AJAX는 Javascript, XHTML, CSS 및 DOM입니다. XML의 조합, 4. 동적 표시 및 상호 작용을 위해 Javascript를 사용하여 문서 개체 모델(네트워크 문서 개체 모델)을 작동합니다.
5. JavaScript를 사용하여 모든 데이터를 바인딩하고 처리합니다.
XML이란? EXtensible Markup Language)
XML HTML과 매우 유사한 마크업 언어입니다. XML은 데이터를 표시하는 것이 아니라 데이터를 전송하도록 설계되었습니다. 라벨을 직접 정의해야 합니다.
XML은 자기 설명이 가능하도록 설계되었습니다.
XML은 W3C에서 권장하는 표준입니다.
XSLT란 무엇인가요?
XSLT는 XSL 변환을 나타냅니다 [1]
XSLT는 XSL의 가장 중요한 부분입니다
XSLT는 한 종류의 XML 문서를 다른 종류의 XML 문서로 변환할 수 있습니다
XSLT는 W3C 표준을 사용합니다
AJAX의 핵심 개체는 XMLHttpRequest입니다
II. AJAX 작동 원리
사용자 작업 프로세스:
사용자 브라우저 ->JavaScript는 XmlHttpRequest 객체를 인스턴스화합니다. ->AJAX 엔진 ->http 요청- >웹 서버->백엔드 비즈니스 시스템
시스템 반환 프로세스:
백엔드 비즈니스 시스템->백엔드 서버->웹 서버->HTML, XML, JSON 데이터->AJAX 엔진->HTML+CSS(Wel 브라우저)-> 사용자 브라우저
3. AJAX 장점과 단점:
AJAX 비동기 처리 장점:
서버 부담 감소, AJAX는 일반적으로 서버에서 필요한 데이터만 가져옵니다.
새로 고침 페이지 업데이트 없음, 사용자 대기 시간 감소
더 나은 고객 경험, 일부 서버 작업을 클라이언트로 전송하여 완료하고, 네트워크 리소스를 절약하고, 사용자 경험을 향상시킬 수 있습니다. 플랫폼 제한이 없습니다. 디스플레이와 데이터의 분리를 촉진합니다. AJAX 비동기 처리의 단점:페이지에 JS가 많이 있습니다. 검색 엔진에 어려움을 초래합니다
AJAX가 뒤로 및 기록 기능을 종료하여 브라우저 메커니즘을 손상시킵니다
도메인 간 문제가 있습니다
utf-8로 인코딩된 데이터만 전송 및 수신할 수 있습니다
1.AJAX 구현 단계
window.open(URL,name,features,replace)
URL:새 창에 표시할 문서의 URL을 선언하는 선택적 문자열입니다. 이 매개변수가 생략되거나 해당 값이 빈 문자열인 경우 새 창에 문서가 표시되지 않습니다.
이름:
숫자, 문자, 밑줄을 포함한 기능을 쉼표로 구분한 목록인 선택적 문자열,
이 문자 새 창의 이름을 선언합니다. 이 이름은 및
if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}XMLHttpRequest는 HTTP를 발행합니다. request
http_request.open("GET|POST","test.php?GET方式传值",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置
//用于向一个已经连接的socket发送数据
//如果是POST传输方式要把值写在send()函数里
http_request.send(向一个已连接的套接口发送数据);
XMLHttpRequest取得响应数据并显示
http_request.onreadystatechange=function(){
if(http_request.readyState==4 && http_request.status==200){
$("p").text(http_request.responseText)
}
}예:
//GET 메소드
매개변수 1: 요청을 get 또는 post 모드로 보낼지 나타냅니다. 매개변수 2: 요청을 보낼 URL 매개변수 3: true는 비동기식 요청을 나타내고, false는 동기식을 나타냅니다. request
http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();POST 요청 보내기
var username=$("input[name='user_name']");매개변수 1: 요청을 get 또는 post 모드로 보낼지 여부를 나타냅니다. 매개변수 2: 요청을 보낼 URL 매개변수 3: true는 비동기 요청을 나타내고, false는 동기를 나타냅니다. request
http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");POST 전송 방식이라면 send( ) 함수에 값을 적어주세요
http_request.send({username:username});
IV.JSON
Javascript Object Notation은 경량 데이터 교환 포맷입니다
JSON은 모든 언어에서 인식됩니다. 다양한 언어로 데이터를 변환하는데 활용해보세요
JSON 지원 다국어
Format
{key:value,key:value,.....} 객체 형식
[{key:value,key:value,... ..},{key:value,key:value, .....},......] 배열 형식
PHP 처리:
$json=json_encode($array) //변수에 대한 JSON 인코딩
$ array=json_decode($json) //Json 데이터 디코드하여 PHP 변수로 변환
JavaScript 처리:
eval('('+json+')') //JS 코드에 따라 특정 문자열을 실행
예:
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象
JSON.stringify(obj) //将JS中的值编译成json字符串
5. jQuery 1의 AJAX 애플리케이션
.
$.ajax({
//你要传的php文件的路径
url:"test1.php", ('服务器url地址')
//以get方式传输拼接字符串
data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
//以什么方式传输
type:'get',('post|get')
//传输返回的数据类型
dataType:'json', ('xml|html|text|json|script')
//展示 数据的方式
success:function(res){
$('h1').text('用户名为：'+res.user_name);
},
//错误信息
error:function(xhr){
},
timeout:2000,
async:true,
cache:false
})라고 쓰는 것을 잊지 마세요. 6. jQuery 2의 AJAX 애플리케이션
$.get()
$.get('服务器url地址'，"json格式或字符串格式"，function(res){
//处理返回的数据
}), "xml|html|json|text|script") 예:
//'服务器url地址'，"json格式或字符串格式"
$.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
//如果后台发过来的值跟这里的值相等让他执行下面代码
if(data.status=='ok'){
alert("登陆成功");
location.href="http://www.wl.com";
}else{
alert("登陆失败");
}
//"xml|html|json|text|script"类型
},'json')
7. jQuery 3의 AJAX 애플리케이션
serialize( ) 시퀀스 테이블 테이블의 내용은 문자열이며 직렬화된 데이터는 Ajax 요청에 사용됩니다
$.post()
$.post('服务器url地址'，"json格式或字符串格式"，function(res){
//处理返回的数据
}), "xml|html|json|text|script")예:
//'服务器url地址'，"json格式或字符串格式" 用post方式提交要用form表单包起来
// 然后用serialize()来拿里面所有有值
$.post("test1.php",$('form').serialize(),function(res){
//如果后台发过来的值跟这里的值相等让他执行下面代码
if(res.status=='ok'){
alert("登陆成功");
location.href="http://www.wl.com";
}else{
alert("登陆失败");
}
//"xml|html|json|text|script"类型
},'json')php
try{
$pdo=new PDO("mysql:host=127.0.0.1;port=3306;dbname=数据库名",'数据库账号','数据库密码');
$pdo->exec("set names utf8");
$sen=$pdo->query("select * from yh_admin where user_name='{$user_name}' limit 1");
if($sen->rowCount()>0){
// $arr=$sen->fetch(PDO::FETCH_ASSOC);
//echo json_encode($arr);
//echo 'yes';
$arr['status']='ok';
}else{
echo 'no';
}
//切记用json数据类型传输
echo json_encode($arr);
}catch (PDOException $e){
echo $e->getMessage();
}위 내용은 jQuery AJAX 지식 포인트 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
