วัตถุXMLHttpRequest _
ด้วยอ็อบเจ็กต์ XMLHttpRequest คุณสามารถอัปเดตบางส่วนของหน้าเว็บได้โดยไม่ต้องโหลดซ้ำทั้งหน้า
ลองด้วยตัวคุณเอง - ตัวอย่าง
สร้าง XMLHttpRequest อย่างง่าย และดึงข้อมูลจากไฟล์ TXT
ดึงข้อมูลส่วนหัวของทรัพยากร (ไฟล์)
ดึงข้อมูลส่วนหัวเฉพาะของทรัพยากร (ไฟล์)
วิธีที่หน้าเว็บสามารถสื่อสารกับเว็บเซิร์ฟเวอร์ในขณะที่ผู้ใช้พิมพ์อักขระในช่องใส่ข้อมูล
วิธีที่เว็บเพจสามารถดึงข้อมูลจากฐานข้อมูลด้วยอ็อบเจ็กต์ XMLHttpRequest
สร้าง XMLHttpRequest เพื่อดึงข้อมูลจากไฟล์ XML และแสดงข้อมูลในตาราง HTML
วัตถุ XMLHttpRequest
ออบเจ็กต์ XMLHttpRequest ใช้เพื่อแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์เบื้องหลัง
ออบเจ็กต์ XMLHttpRequest คือความฝันของนักพัฒนาเนื่องจากคุณสามารถ:
- อัปเดตหน้าเว็บโดยไม่ต้องโหลดหน้าซ้ำ
- ขอข้อมูลจากเซิร์ฟเวอร์หลังจากโหลดหน้าแล้ว
- รับข้อมูลจากเซิร์ฟเวอร์หลังจากโหลดเพจแล้ว
- ส่งข้อมูลไปยังเซิร์ฟเวอร์ในพื้นหลัง
XMLHttpRequest Object Methods
| Method | Description |
|---|---|
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method,url,async,uname,pswd) | Specifies the type of request, the URL, if the request should be handled asynchronously or not, and other optional attributes of a request
method: the type of request: GET or POST url: the location of the file on the server async: true (asynchronous) or false (synchronous) |
| send(string) | send(string) Sends the request off to the server. string: Only used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
XMLHttpRequest คุณสมบัติอ็อบเจ็กต์
| Property | Description |
|---|---|
| onreadystatechange | Stores a function (or the name of a function) to be called automatically each time the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number (e.g. "404" for "Not Found" or "200" for "OK") |
| statusText | Returns the status-text (e.g. "Not Found" or "OK") |