AJAX - XMLHttpRequest 对象
Ang XMLHttpRequest na bagay ay ang batayan ng AJAX.
- Lumikha ng XMLHttpRequest object
- Tukuyin ang callback function
- Buksan ang XMLHttpRequest na bagay
- Ipadala ng kahilingan sa server
XMLHttpRequest object
Ang lahat ng modernong browser ay sumusuporta. XMLHttpRequest object.
Ang XMLHttpRequest na bagay ay maaaring gamitin para sa pagpapalitan ng datos sa Web server sa likuran. Ito nangangahulugan na maaaring i-update ang bahagi ng web page na walang pag-reload ng buong pahina.
Lumikha ng XMLHttpRequest object
Lahat ng modernong browser (Chrome, Firefox, IE, Edge, Safari, Opera) ay may nakalipas na XMLHttpRequest object.
Gramatika ng paglulikha ng XMLHttpRequest object:
variable = new XMLHttpRequest();
Tukuyin ang callback function
Ang callback function ay isang function na ipinapasa bilang parameter sa ibang function.
Sa kasong ito, ang callback function ay dapat maglaman ng code na dapat ipatupad kapag handa na ang response.
xhttp.onload = function() {
// Ano ang dapat gawin kapag handa na ang response
}
Ipadala ang request
Kung gusto mong ipadala ang request sa server, maaari mong gamitin ang XMLHttpRequest object na open() at send() Paraan:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
实例
// Lumikha ng XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Tukuyin ang callback function
xhttp.onload = function() {
// Maaari mong gamitin ang data dito
}
// Ipadala ang request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Cross-Domain Access (Access Across Domains)
Para sa seguridad, ang modernong browser ay hindi pinapayagan ang cross-domain access.
Ito nangangahulugan na ang webpage at ang XML file na sinisikap na ilagay ay dapat nasa parehong server.
Ang mga halimbawa sa CodeW3C.com ay naka-open sa XML file na nasa CodeW3C.com domain.
Kung gusto mong gamitin ang mga halimbawa sa iyong isang webpage, ang XML file na iyong ilalagay ay dapat nasa iyong sariling server.
Mga method ng XMLHttpRequest object
| Paraan | Description |
|---|---|
| new XMLHttpRequest() | Lumikha ng bagong XMLHttpRequest object. |
| abort() | Kanselahin ang kasalukuyang request. |
| getAllResponseHeaders() | Ibalik ang header information. |
| getResponseHeader() | Ibalik ang partikular na header information. |
| open(method, url, async, user, psw) |
Tukuyin ang request.
|
| send() | Ipadala ang request sa server, para sa GET request. |
| send(string) | Ipadala ang request sa server, para sa POST request. |
| setRequestHeader() | Idinagdag ang tag/alue pair sa header na dapat ipadala. |
Attribute ng XMLHttpRequest object
| Property | Description |
|---|---|
| onload | Tukuyin ang function na dapat tawagan kapag natanggap ang (loading) request. |
| onreadystatechange | Tukuyin ang function na dapat tawagan kapag nagbabago ang readyState attribute. |
| readyState |
Save the state of XMLHttpRequest.
|
| responseText | Return the response data as a string. |
| responseXML | Return the response data in XML format. |
| status |
Return the status number of the request
For a complete list, please visit Http Message Reference Manual |
| statusText | Return the status text (such as "OK" or "Not Found") |
onload property
When using XMLHttpRequest objects, you can define a callback function to be executed when the response is received.
Please define the function in the XMLHttpRequest object: onload Define the function in the property:
实例
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Multiple callback functions
If there are multiple AJAX tasks on the website, then a function to execute the XMLHttpRequest object should be created, and a callback function should be created for each AJAX task.
The function call should include the URL and the function to be called when the response is ready.
实例
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// This is the action
}
function myFunction2(xhttp) {
// This is the action
}
onreadystatechange property
readyState Property saves the state of XMLHttpRequest.
onreadystatechange Property defines a callback function to be executed when the readyState changes.
status Properties and statusText Property saves the state of the XMLHttpRequest object.
| Property | Description |
|---|---|
| onreadystatechange | Define the function to be called when the readyState property changes. |
| readyState |
Save the state of XMLHttpRequest.
|
| status |
Return the status number of the request
For a complete list, please visit Http Message Reference Manual |
| statusText | 返回状态文本（比如 "OK" 或 "Not Found"）。 |
每次 readyState 改变时都会调用 onreadystatechange 函数。
当 readyState 为 4 且 status 为 200 时，响应就绪：
实例
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
onreadystatechange 事件被触发了四次（1-4），每次 readyState 变化一次。
