이 기사에서는 AJAX, PHP 및 AJAX, JSON 형식 및 jQuery의 AJAX에 대한 기본 사항을 공유합니다. 이 기사가 도움이 되기를 바랍니다.
1. AJAX 기본
(1) AJAX(Asynchronous JavaScript and XML): 비동기식 javascript 및 xml의 약어입니다.
(2)AJAX는 프로그래밍 언어가 아니라 전체 페이지를 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있는 기술입니다.
(3) 기존 웹 페이지의 단점: 콘텐츠를 업데이트하거나 양식을 제출해야 하는 경우 전체 페이지를 다시 로드해야 합니다. AJAX 사용의 장점: 백그라운드에서 서버와 소량의 데이터를 교환함으로써 웹페이지는 비동기식 부분 업데이트를 달성할 수 있습니다. 복잡한 양식을 작성하는 데 매우 좋은 사용자 경험을 제공합니다.
(4) AJAX 동기화 및 비동기성: 동기화는 단순히 전체 페이지를 로드하는 것을 의미하며 페이지의 일부를 비동기적으로 로드할 수 있습니다. 특히 클라이언트와 서버 간의 연결입니다. Ajax 기술이 출현하기 전에는 데이터가 동기적으로 교환되었으므로 더 복잡한 양식을 작성하는 경우 매우 번거로웠습니다. XMLHttpRequest 개체를 사용하면 동기 세계가 비동기 세계가 됩니다. 백그라운드에서 XMLHttpRequest 객체를 통해 서버와 데이터를 교환할 수 있습니다.
(5) XMLHttpRequest 객체 생성: var requerst=new XMLHttpRequest();객체를 직접 인스턴스화하세요! 참고: IE5 및 IE6은 이 정의를 지원하지 않습니다. 브라우저 페이지 호환성을 얻으려면 다음 코드를 참조하세요.
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); // IE7+,Firefox,Chrome,Opera,Safari...
}else{
request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}로그인 후 복사
(6) HTTP 요청: http는 상태 비저장 프로토콜입니다. 직설적으로 말하면 지속적인 연결을 설정할 수 없고 메모리가 없는 프로토콜입니다. 추가: 페이지 요청 및 응답 프로세스를 통해 웹 페이지 디버깅을 실현합니다.
(6.1) 완전한 HTTP 요청 프로세스는 일반적으로 다음 7단계로 구성됩니다.
(6.2) http 요청은 일반적으로 다음으로 구성됩니다. 네 부분 구성:
HTTP 요청 방법 또는 작업(예: GET 또는 POST 요청)
요청되는 URL, 요청된 주소가 무엇인지 알아야 합니다
요청 헤더에는 일부 클라이언트 환경 정보가 포함되어 있습니다. 신원 확인 정보 등
요청 본문인 요청 본문에는 고객이 제출한 쿼리 결제 정보, 양식 정보 등이 포함될 수 있습니다.
(6.3) GET 및 POST[ 메소드에서 수집= "post/get" 형식의 이름 값]
직접 말하면 폼에서 전달된 값을 수집합니다. 전달된 값 중 하나는 url(안전하지 않음) 형식으로 표시되고 다른 하나는 값(안전함) 형식으로 표시됩니다. GET은 일반적으로 url을 사용하여 매개변수를 전달하는데 사용됩니다. 모든 사람에게 표시되며 안전하지 않습니다. POST는 일반적으로 양식에서 데이터를 전송하는 데 사용됩니다. 매개변수는 http 요청 본문에 있으며 전송되는 정보의 양에는 제한이 없습니다.
(6.4)Http 응답은 일반적으로 세 부분으로 구성됩니다.
숫자와 텍스트로 구성된 상태 코드는 요청의 성공 또는 실패 여부를 표시하는 데 사용됩니다.
서버 유형, 날짜 및 time, 콘텐츠 유형 및 길이 등
응답 본문입니다.
(6.5)Http 상태 코드는 세 자리 숫자로 구성되며 첫 번째 숫자는 상태 코드 유형을 정의합니다.
(7) XMLHttpRequest는 요청을 보냅니다: (객체 메서드)
- open (메서드 요청 메서드, URL 요청 주소, 비동기 요청 동기 또는 비동기(비동기는 true, 동기는 false, 실제로 기본값은 true)) ;///
CallAsynchronous request
- send(string); (get 메소드를 사용할 때 정보가 주소 표시줄 URL에 포함되므로 매개변수를 비워두거나 null로 둘 수 있습니다. 게시물을 작성해야 합니다.);/ /요청
을 서버
로 보냅니다. 예:
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息,告诉web服务器要发送一个表单;注意：setRequest请求一定要放在open和send之间，否则会抛出异常
request.send("name=王大锤&sex=男");로그인 후 복사
(8) XMLHttpRequest는 다음 응답을 받습니다. (객체의 메서드 및 속성)
readyState 속성: 응답이 성공적으로 반환되면 알림을 받습니다.
0：请求未初始化，open还没有调用。
1：服务器连接已建立，open已经调用了。
2：请求已经接收，也就是接收到头信息了。
3：请求处理中，也就是接收到响应主体了。
4：请求已完成，且响应已就绪，也就是响应完成了。
举个栗子:涵盖了ajax的大部分内容(典型的xhr建立ajax的过程)
var request = new XMLHttpRequest();//创建XHR对象
request.open("GET","get.php",true);//调用异步请求
request.send();//发送异步请求
//对事件进行监听,判断服务器是否正确得做出了响应
request.onreadystatechange = function(){
if(request.readyState===4 && request.status === 200){
request.reponseText;//接收服务器响应回送的数据
}
}로그인 후 복사
2.PHP与AJAX
实战:[服务器端与客户端]实现查询员工和新建员工的后台接口
(1)客户端部分代码:
//新建员工客户端代码
document.getElementById("save").onclick=function(){
var request=new XMLHttpRequest();//创建XHR对象
request.open("POST","action.php");//调用异步请求
//data拼接的URL
//document.getElementById("staffName").value获取表单中用户写入的值
var data = "username=" + document.getElementById("staffName").value
+ "&num=" + document.getElementById("staffNumber").value
+ "&workname=" + document.getElementById("staffJob").value;
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息
request.send(data);//发送异步请求
//对事件进行监听,判断服务器是否能正确做出响应
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
//innerHTML不仅可以读取元素内容,还可以将内容写入元素
//ajax引擎对象通过responseText属性或者responseXML属性接收服务器回送的数据，然后在静态页面中对其进行处理，使页面达到局部刷新的效果
document.getElementById("createResult").innerHTML=request.responseText;
}else{
alter("发生错误:"+request.status);
}
}
}
}로그인 후 복사
(2)服务器端部分代码:
//查询员工服务器端代码
<?php
header('Content-type:text/html;charset=utf8');
$con=mysqli_connect("127.0.0.1","","");
mysqli_select_db($con,"function");
$sql="SELECT * FROM `ajax`";
$query=mysqli_query($con,$sql);
//数据库数据的总条数$number
$number=mysqli_num_rows($query);
for($i=0;$i<$number;$i++){
//将每条数据转换成关联数组打印出来
$arr=mysqli_fetch_row($query);
//print_r($arr);
//echo $arr[2];die;
if($_GET['num']==$arr[2]){
echo "找到员工:编号$arr[2],姓名:$arr[1],职位:$arr[3]";
break;
}
}
?>로그인 후 복사
3.JSON格式
(1)json:javascript对象表示法。
(2)json是存储和交换文本信息的语法，类似xml。采用键值对的方式组织，易于人们阅读与机器解析。
(3)json是独立于语言的，不管什么语言都可以解析json，只要按json的规则来就行。
(4)json的长度比xml小;json读写的速度更快;json可以使用js内建方法直接解析，转化成js对象，非常方便。
(5)json语法规则：json数据的书写格式是：名称/值对。
名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如"name":"王大锤"。注意：json与javaScript对象表示法不同，javaScript对象表示法的键值不需要用引号，但是json的键值要用引号。
注意：json可以是整型、浮点型、字符串(在双引号中)、布尔值(true或false)、数组(在方括号中)、对象(在花括号中)、null等数据类型。
举个栗子：
{//定义了一个json对象
"staff":[//定义了一个数组
{"name":"王大锤","age":21},//定义了一个name对象
{"name":"叫兽","age":35}
]
}로그인 후 복사
(6)json解析：eval()和JSON.parse()两种方式解析成JSON形式
两种方法比较：建议使用JSON.parse()方法解析成JSON形式
eval();不安全，如果json中有函数或js程序代码（alert或一个window.location.href()跳转链接病毒网站等），会优先执行代码，危险操作。JSON.parse();对json文件具有校验功能，如果json文件里面有程序脚本，会解析报错。
举个栗子：
var jsondata='{
"staff":[{
"name":"王大锤",
"age":22
},
{
"name":"叫兽",
"age":23
},
{
"name":"王尼玛",
"age":24
}
]
}';
var jsonobj=JSON.parse(jsondata);//JSON.parse解析JSON
var jsonobj=eval('(' + jsondata + ')');//eval解析JSON
alert(jsonobj.staff[0].name);로그인 후 복사
注意：上面书写是错误的，只为了看清楚。逗号不是分隔符，逗号是文本内容，所有的都应该紧凑写，不能自己为了看清楚，人为用空格分开。(这里找了一个小时错误...)
(7)json验证工具：JSONLint
(8)举个栗子:
使用json,首先需要服务器端的约定,
用此种方法能够减少更多的判断,以更加优雅的形式显示
{
//前端规则验证、后端数据验证
"success":true,//是否正确执行(表单等规则验证)
"msg":"×××"//请求的响应值是否成功(http响应返回的信息)
}로그인 후 복사
服务器端部分代码:
//echo "参数错误，员工信息填写不全";
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
if($query){
//echo "员工：" . $_POST["username"] . " 信息保存成功！";
echo '{"success":true,"msg":"员工保存成功"}';
}else{
//echo "员工：" . $_POST["username"] . " 信息保存失败！";
echo '{"success":false,"msg":"员工保存失败"}';
}로그인 후 복사
客户端json代码:其它不变,将服务器端响应传过来的responseText(文本形式)转换为(JSON形式),将json字符串转化为了一个json对象data,然后就能够以对象的形式处理数据
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
//将服务器端响应传过来的responseText(文本形式)转换为(JSON形式)
//将json字符串转化为了一个json对象data
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById("createResult").innerHTML=data.msg;
}else{
document.getElementById("createResult").innerHTML="出现错误"+data.msg;
}
}
}
}로그인 후 복사
4.jQuery中的AJAX
(1)使用jquery实现ajax请求：作用：避免兼容问题，代码简洁，操作快捷方便。
(2)语法:jQuery.ajax([settings])
type：类型，“POST”或“GET”，默认为“GET”。
url：发送请求的地址。
data：是一个对象，连同请求发送到服务器的数据。
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”。
success：是一个方法，请求成功后的毁掉函数。传入返回后的数据，以及包含成功代码的字符串。
error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。
相关推荐：
PHP与Ajax调用
php与ajax实现页面自动刷新
PHP与Ajax相结合实现登录验证小Demo_PHP
위 내용은 PHP 및 AJAX 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
