In diesem Artikel teilen wir Ihnen die Grundlagen von AJAX, PHP und AJAX, dem JSON-Format und AJAX in jQuery mit. Ich hoffe, dieser Artikel kann Ihnen helfen.
1. AJAX-Grundlagen
(1) AJAX (Asynchronous JavaScript and XML): Abkürzung für asynchrones Javascript und XML.
(2) AJAX ist keine Programmiersprache, sondern eine Technologie, die einen Teil einer Webseite aktualisieren kann, ohne die gesamte Seite zu laden.
(3) Nachteile herkömmlicher Webseiten: Wenn Sie Inhalte aktualisieren oder ein Formular senden müssen, müssen Sie die gesamte Seite neu laden. Vorteile der Verwendung von AJAX: Durch den Austausch einer kleinen Datenmenge mit dem Server in Im Hintergrund kann die Webseite asynchrone Teilaktualisierungen erreichen. Es bietet eine sehr gute Benutzererfahrung beim Ausfüllen komplexer Formulare.
(4) AJAX-Synchronisation und Asynchronität: Synchronisierung bedeutet einfach, dass beim asynchronen Laden der gesamten Seite ein Teil der Seite geladen werden kann. Konkret geht es um die Verbindung zwischen Client und Server. Vor dem Aufkommen der Ajax-Technologie wurden Daten synchron ausgetauscht, was beim Ausfüllen komplexerer Formulare sehr problematisch war. Mit dem XMLHttpRequest-Objekt wird die synchrone Welt zu einer asynchronen Welt. Über das XMLHttpRequest-Objekt können im Hintergrund Daten mit dem Server ausgetauscht werden.
(5) XMLHttpRequest-Objekterstellung: var requerst=new XMLHttpRequest(); Instanziieren Sie das Objekt einfach direkt! Hinweis: IE5 und IE6 unterstützen diese Definition nicht. Wenn Sie Browserseitenkompatibilität erreichen möchten, wird der folgende Code angezeigt:
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest(); // IE7+,Firefox,Chrome,Opera,Safari...
}else{
request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}Nach dem Login kopieren
(6) HTTP-Anfrage: http ist ein zustandsloses Protokoll: Um es ganz klar auszudrücken: Es ist ein Protokoll, das keine dauerhaften Verbindungen aufbauen kann und kein Gedächtnis hat. Weiter: Implementieren Sie das Debuggen von Webseiten durch den Prozess der Seitenanforderung und -antwort.
(6.1) Ein vollständiger HTTP-Anfrageprozess umfasst normalerweise die folgenden 7 Schritte:
TCP-Verbindung herstellen
Das Web Der Browser sendet einen Anforderungsbefehl an den Webserver
Der Webbrowser sendet die Anforderungsheaderinformationen
Der Webserver antwortet
Webserver sendet Antwort-Header-Informationen
Webserver sendet Daten an Browser
-
Webserver schließt TCP-Verbindung
(6.2) Die HTTP-Anfrage besteht im Allgemeinen aus vier Teilen:
Methode oder Aktion der HTTP-Anfrage, z. B. GET- oder POST-Anfrage
Die angeforderte URL muss die angeforderte Adresse kennen
Der Anforderungsheader enthält einige Informationen zur Clientumgebung, Authentifizierungsinformationen usw.
Anfragetext, der der Anfragetext ist. Der Anfragetext kann die vom Kunden übermittelten Abfrage-Zahlungsinformationen, Formularinformationen usw. enthalten
(6.3 )GET und POST[Sammeln Sie den Namenswert aus dem Formular mit method="post/get"]
Um es ganz klar auszudrücken: Sie alle sammeln den vom Formular übergebenen Wert. Bei den übergebenen Werten wird einer in Form einer URL (unsicher) und der andere in Form eines Werts (sicher) angezeigt. GET wird im Allgemeinen zum Abrufen von Informationen verwendet. Verwenden Sie URL, um Parameter zu übergeben . auf 2000 Zeichen begrenzt, für jeden sichtbar, nicht sicher. POST wird im Allgemeinen verwendet, um Daten aus einem Formular zu senden. Die Parameter befinden sich im HTTP-Anfragetext und es gibt keine Begrenzung für die Anzahl der gesendeten Nachrichten.
(6.4)HTTP-Antwort besteht im Allgemeinen aus drei Teilen:
Ein Statuscode bestehend aus einer Zahl und einem Text, der anzeigt, ob die Anfrage erfolgreich ist oder fehlgeschlagen ist;
Antwortheader, einschließlich Servertyp, Datum und Uhrzeit, Inhaltstyp und -länge usw.;
Antworttext, der die Antwort darstellt Körper.
(6.5)Der HTTP-Statuscode besteht aus drei Ziffern, wobei die erste Ziffer den Typ des Statuscodes definiert:
1XX: Informationstyp , was anzeigt, dass die Webbrowser-Anfrage empfangen wurde und weiterverarbeitet wird;
2XX: Erfolg, was anzeigt, dass die Benutzeranfrage empfangen, verstanden und korrekt verarbeitet wurde, zum Beispiel: 200 OK
3XX: Weiterleitung, was darauf hinweist, dass die Anfrage nicht erfolgreich war und der Kunde weitere Maßnahmen ergreifen muss
4XX: Clientfehler, was darauf hinweist, dass die Wenn die vom Kunden übermittelte Anfrage einen Fehler aufweist, z. B. 404 NICHT GEFUNDEN, bedeutet dies, dass das in der Anfrage referenzierte Dokument nicht vorhanden ist.
5XX: Serverfehler, der darauf hinweist, dass der Server die Verarbeitung der Anfrage nicht abschließen kann.
(7)XMLHttpRequest sendet eine Anfrage: (Objektmethode)
open(Methodenanfragemethode, URL-Anfrageadresse, asynchrone Anfragesynchronisierung oder Asynchron (asynchron ist wahr, synchron ist tatsächlich wahr)); ///Call Asynchronous request
send(string); Wenn Sie die Get-Methode verwenden, können die Parameter leer bleiben oder null sein, da die Informationen bei Verwendung von Post in der Adressleiste enthalten sind. // Senden Sie die Anfrage an Server
Zum Beispiel:
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的头信息,告诉web服务器要发送一个表单;注意：setRequest请求一定要放在open和send之间，否则会抛出异常
request.send("name=王大锤&sex=男");Nach dem Login kopieren
(8)XMLHttpRequest erhält die Antwort: (Methoden und Eigenschaften des Objekts)
-
responseText: einfach Mit anderen Worten: Es geht darum, die vom Server als Antwort zurückgesendeten Daten zu empfangen. Holen Sie sich die entsprechenden Daten als String.
responsXML: Erhalten Sie die entsprechenden Daten im XML-Format. Jetzt werden sie im Allgemeinen in Daten im JSON-Format konvertiert.
status und statusText: Gibt den http-Statuscode in Form von Zahlen und Text zurück.
getAllResponseHeader(): Alle Antwortheader abrufen.
getResponseHeader(): Fragen Sie den Wert eines Feldes in der Antwort ab.
readyState-Attribut: Werden Sie benachrichtigt, wenn die Antwort erfolgreich zurückgegeben wird.
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;//接收服务器响应回送的数据
}
}Nach dem Login kopieren
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);
}
}
}
}Nach dem Login kopieren
(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;
}
}
?>Nach dem Login kopieren
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}
]
}Nach dem Login kopieren
(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);Nach dem Login kopieren
注意：上面书写是错误的，只为了看清楚。逗号不是分隔符，逗号是文本内容，所有的都应该紧凑写，不能自己为了看清楚，人为用空格分开。(这里找了一个小时错误...)
(7)json验证工具：JSONLint
(8)举个栗子:
使用json,首先需要服务器端的约定,
用此种方法能够减少更多的判断,以更加优雅的形式显示
{
//前端规则验证、后端数据验证
"success":true,//是否正确执行(表单等规则验证)
"msg":"×××"//请求的响应值是否成功(http响应返回的信息)
}Nach dem Login kopieren
服务器端部分代码:
//echo "参数错误，员工信息填写不全";
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
if($query){
//echo "员工：" . $_POST["username"] . " 信息保存成功！";
echo '{"success":true,"msg":"员工保存成功"}';
}else{
//echo "员工：" . $_POST["username"] . " 信息保存失败！";
echo '{"success":false,"msg":"员工保存失败"}';
}Nach dem Login kopieren
客户端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;
}
}
}
}Nach dem Login kopieren
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
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von PHP- und AJAX-Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
