Một ví dụ đơn giản về việc sử dụng PHP và AJAX. Bỏ qua dữ liệu không thay đổi. Đặt tham số cơ bản cho yêu cầu Ajax
Một tập hợp các cặp khóa/giá trị cấu hình yêu cầu AJAX. Tất cả các tham số là tùy chọn. Có thể chấp nhận nhưng không khuyến khích đặt giá trị mặc định cho bất kỳ tham số nào bằng phương thức $.ajaxSetup().Phương thức $.ajax() hỗ trợ các tham số sau:
- "xml" - trả về XML tài liệu có thể được hiển thị bằng jQuery.
- "html" - trả về HTML Giống như văn bản thuần túy, các thẻ sẽ được xử lý và thực thi sau khi được chèn vào mô hình đối tượng tài liệu ( DOM).
- "script" - đánh giá phản hồi là JavaScript và trả về dưới dạng văn bản thuần túy. Tắt bộ nhớ đệm bằng cách thêm tham số _= vào chuỗi truy vấn, ngay cả khi tham số bộ nhớ đệm là đúng. Điều này sẽ biến phương pháp BƯU KIỆN V. LẤY cho các yêu cầu tên miền chéo.
- "json" - đánh giá phản hồi là JSON và trả về một đối tượng JavaScript. Tên miền chéo "json" yêu cầu được chuyển đổi thành "jsonp", nếu jsonp không được chỉ định trong tham số yêu cầu: false . Dữ liệu JSONđược phân tích cú pháp theo một thứ tự nghiêm ngặt và phải tuân theo định dạng được chấp nhận chung, bất kỳ sai sót nào JSON bị từ chối và một lỗi được đưa ra. Kể từ jQuery 1.9, phản hồi trống không được chấp nhận; máy chủ phải trả về NULL hoặc () làm phản hồi.
- "jsonp" - tải dữ liệu ở định dạng JSON, sử dụng định dạng tải xuống JSONP. Thêm tham số bổ sung "?callback=? " vào cuối URLđịa chỉ để chỉ định tên của hàm xử lý. Tắt bộ nhớ đệm bằng cách thêm tham số _= vào URLđịa chỉ, ngay cả khi tham số bộ đệm là đúng.
- "văn bản" là một chuỗi văn bản thông thường.
- nhiều giá trị - các giá trị được phân tách bằng dấu cách. Kể từ phiên bản 1.5, jQuery có thể chuyển đổi kiểu dữ liệu nhận được trong Content-Type của tiêu đề thành kiểu dữ liệu mà bạn yêu cầu. Ví dụ: nếu bạn muốn phản hồi văn bản được hiểu là XML, hãy sử dụng "XML văn bản" cho loại dữ liệu đó. Bạn cũng có thể tạo một yêu cầu JSONP, nhận nó dưới dạng văn bản và diễn giải nó dưới dạng XML: "văn bản JSONp XML". Dòng sau đây sẽ thực hiện tương tự: "jsonp XML" , jQuery sẽ cố gắng chuyển đổi từ JSONP V. XML, sau khi thử không thành công sẽ cố gắng chuyển đổi JSONP vào văn bản, sau đó từ văn bản vào XML.
Loại: Hàm(jqXHR jqXHR, Sợi dây văn bảnTrạng thái, Sợi dây lỗiNém).
Hàm gọi lại được gọi nếu yêu cầu AJAX chưa được hoàn thành. Hàm nhận được ba đối số:- jqXHR- đối tượng jqXHR (trong jQuery 1.4.x, đối tượng XMLHttpRequest).
- văn bảnTrạng thái- một chuỗi mô tả loại lỗi đã xảy ra. Các giá trị có thể (trừ null) thì không "hết giờ", "lỗi", "sự phá thai" Và "lỗi phân tích cú pháp".
- lỗiNém- đối tượng ngoại lệ bổ sung nếu xảy ra. Khi xảy ra lỗi HTTPđối số nhận phần văn bản của trạng thái, ví dụ: "Không tìm thấy", hoặc "Lỗi máy chủ nội bộ".
toàn cầu (mặc định: true ).
Kiểu: Boolean.
Tham số Boolean xác định xem trình xử lý sự kiện AJAX toàn cầu có được phép gọi cho yêu cầu này hay không. Giá trị mặc định là true . Nếu bạn cần ngăn việc gọi các trình xử lý sự kiện chung như .ajaxStart() hoặc .ajaxStop(), thì hãy sử dụng false .tiêu đề (mặc định: ( ) ).
Loại: PlainObject.
Một đối tượng chứa các cặp khóa/giá trị của các tiêu đề yêu cầu bổ sung sẽ được gửi cùng với yêu cầu bằng cách sử dụng đối tượng XMLHttpRequest. Xin lưu ý rằng tiêu đề X-Yêu cầu-Với: XMLHttpRequest luôn được thêm vào, nhưng theo mặc định, giá trị của XMLHttpRequest có thể được thay đổi bằng tham số này. Các giá trị tiêu đề cũng có thể bị ghi đè bởi tham số beforeSend. Đã thêm vào jQuery 1.5.ifModified (mặc định: false).
Kiểu: Boolean.
Mặc định là false, bỏ qua các trường tiêu đề Yêu cầu HTTP và nếu giá trị là đúng, yêu cầu AJAX sẽ được chuyển sang trạng thái thành công ( thành công), chỉ khi phản hồi từ máy chủ đã thay đổi kể từ yêu cầu cuối cùng. Việc xác thực được thực hiện bằng cách kiểm tra trường tiêu đề được sửa đổi lần cuối. Kể từ phiên bản jQuery 1.4, ngoài tiêu đề được sửa đổi lần cuối, “etag” cũng được chọn ( thẻ thực thể) là mã định danh riêng được máy chủ web gán cho một phiên bản cụ thể của tài nguyên được tìm thấy tại một URL. Nếu nội dung tài nguyên cho địa chỉ này thay đổi thành địa chỉ mới thì một etag mới sẽ được gán.isLocal (mặc định: phụ thuộc vào vị trí hiện tại).
Kiểu: Boolean.
Sử dụng true để xác định môi trường hiện tại là "cục bộ" (ví dụ: file:///url), ngay cả khi jQuery không nhận ra nó theo mặc định. Các giao thức sau hiện được công nhận là cục bộ: tài liệu, *-sự mở rộng Và tiện ích. Nếu bạn cần thay đổi tham số isLocal, bạn nên thực hiện việc này một lần bằng cách sử dụng hàm $.ajaxSetup(). Đã thêm vào jQuery 1.5.1.Kiểu: Boolean hoặc Chuỗi.
Ghi đè tên hàm gọi lại trong JSONP lời yêu cầu. Giá trị này sẽ được sử dụng thay vì "gọi lại" ( "http://domain.ru/test.php?callback=?") như một phần của chuỗi truy vấn trong URL. Ví dụ: giá trị (jsonp: "onLoad") sẽ được chuyển đến máy chủ dưới dạng chuỗi truy vấn sau "http://domain/test.php?onLoad=?".
Kể từ jQuery 1.5, việc đặt tham số jsonp thành false sẽ ngăn chuỗi "?callback" được thêm vào URL hoặc cố gắng sử dụng "=?" để giải quyết phản hồi. Trong trường hợp này, bạn phải chỉ định thêm giá trị của tham số jsonpCallback, ví dụ: ( jsonp : false , jsonpCallback : "callbackName " ) Vì lý do bảo mật, nếu bạn không tin tưởng mục tiêu của các yêu cầu AJAX thì bạn nên đặt giá trị của tham số jsonp thành false.jsonpCallback.
Loại: Chuỗi hoặc Hàm.
Chỉ định tên của hàm gọi lại cho JSONP lời yêu cầu. Giá trị này sẽ được sử dụng thay cho tên ngẫu nhiên được tạo và gán tự động thư viện jQuery. Khuyến nghị rằng jQuery nên tự tạo tên duy nhất, điều này sẽ giúp việc quản lý các yêu cầu và xử lý các lỗi có thể xảy ra dễ dàng hơn. Trong một số trường hợp, việc đặt tên hàm của riêng bạn sẽ cải thiện bộ nhớ đệm của trình duyệt LẤY yêu cầu.
Kể từ jQuery 1.5, bạn có thể chỉ định một hàm làm giá trị của tham số jsonpCallback. Trong trường hợp này, giá trị của tham số jsonpCallback phải được đặt thành giá trị trả về của hàm này.phương thức (mặc định: "LẤY").
Loại: Chuỗi.
Phương pháp HTTP, được sử dụng cho truy vấn (ví dụ: "BƯU KIỆN", "LẤY", "ĐẶT"). Đã thêm vào jQuery 1.9.0.mimeType.
Loại: Chuỗi.
Loại MIME ghi đè loại MIME mặc định được chỉ định trong đối tượng XHR. Đã thêm vào jQuery 1.5.1.mật khẩu.
Loại: Chuỗi.
Mật khẩu sẽ được sử dụng với XMLHttpRequest để phản hồi yêu cầu xác thực quyền truy cập HTTP.processData (mặc định: true).
Kiểu: Boolean.
Theo mặc định, dữ liệu được truyền vào tham số data dưới dạng đối tượng sẽ được xử lý và chuyển đổi thành chuỗi truy vấn phù hợp với kiểu dữ liệu mặc định "ứng dụng/x-www-form-urlencoded". Nếu bạn cần gửi DOMDocument hoặc dữ liệu chưa được xử lý khác, hãy đặt tham số này thành false.scriptCharset.
Loại: Chuỗi.
Đặt thuộc tính bộ ký tự (mã hóa ký tự) thành Thẻ HTML, được sử dụng trong yêu cầu. Được sử dụng khi mã hóa trên trang khác với mã hóa của tập lệnh từ xa. Xin lưu ý rằng tham số scriptCharset chỉ áp dụng cho các yêu cầu tên miền chéo có tham số loại có giá trị "LẤY"(mặc định) và tham số dataType có giá trị "jsonp", hoặc "kịch bản".Mã trạng thái (mặc định: ( ) ).
Loại: PlainObject.
Đối tượng mã số HTTP và các hàm sẽ được gọi khi mã phản hồi của máy chủ có giá trị phù hợp ( mã cụ thể HTTP). Ví dụ: hàm sau sẽ được gọi nếu nhận được mã phản hồi từ máy chủ 404 , hoặc "Không tìm thấy" (mã chuẩn Phản hồi HTTP chỉ ra rằng máy khách có thể giao tiếp với máy chủ, nhưng máy chủ không thể tìm thấy dữ liệu theo yêu cầu.): $.ajax(( statusCode : ( 404: function ()( // thực thi hàm nếu mã phản hồi HTTP là cảnh báo 404( "không tìm thấy trang"); ) , 403: function ()( // thực thi hàm nếu mã phản hồi HTTP là cảnh báo 403("truy cập bị từ chối "); ) ) ) );thành công.
Loại: Chức năng (Bất cứ điều gì dữ liệu, Sợi dây văn bảnTrạng thái,jqXHR jqXHR).
Hàm gọi lại được gọi nếu yêu cầu AJAX thành công. Hàm được truyền ba đối số:- dữ liệu- dữ liệu được trả về từ máy chủ. Dữ liệu được định dạng theo các tham số dataType, hoặc dataFilter, nếu được chỉ định
- văn bảnTrạng thái- một chuỗi mô tả trạng thái của yêu cầu.
- jqXHR- đối tượng jqXHR (lên đến phiên bản jQuery 1.4.xđối tượng XMLHttpRequest).
hết giờ.
Loại: Số.
Số lượt cài đặt ở mili giây hết thời gian yêu cầu. Nghĩa 0 có nghĩa là không có thời gian chờ nào được đặt. Xin lưu ý rằng tham số này ghi đè giá trị thời gian chờ được đặt bằng hàm $.ajaxSetup(). Thời gian chờ bắt đầu tại thời điểm phương thức $.ajax() được gọi.truyền thống.
Kiểu: Boolean.
Nếu bạn định sử dụng các tùy chọn xê-ri hóa truyền thống (phù hợp để sử dụng trong chuỗi URL yêu cầu hoặc yêu cầu AJAX), sau đó đặt giá trị của tham số này thành true .loại (mặc định: "LẤY").
Loại: Chuỗi.
Bí danh cho tham số phương thức. Bạn nên sử dụng loại nếu bạn đang sử dụng phiên bản jQuery trước 1.9.0.url (mặc định: trang hiện tại).
Loại: Chuỗi.
Một dòng chứa URLđịa chỉ mà yêu cầu được gửi tới.tên tài khoản.
Loại: Chuỗi.
Tên người dùng sẽ được sử dụng với XMLHttpRequest để phản hồi yêu cầu xác thực quyền truy cập HTTP.xhr (mặc định: Đối tượng ActiveX, khi có sẵn ( trình duyệt web IE ), trong các trường hợp khác XMLHttpRequest .
Loại: Hàm() .
Gọi lạiđể tạo một đối tượng XMLHttpRequest. Với tham số này, bạn có thể ghi đè đối tượng XMLHttpRequest để cung cấp cách triển khai của riêng bạn.xhrFields.
Loại: PlainObject.
Một đối tượng chứa các cặp field_name:field_value sẽ được đặt thành đối tượng XHR. Ví dụ: bạn có thể xác định xem có nên tạo yêu cầu tên miền chéo hay không bằng cách sử dụng thông tin xác thực như bánh quy, tiêu đề ủy quyền hoặc chứng chỉ TLS: $.ajax(( url : "cross_domain_url ", // địa chỉ mà yêu cầu sẽ được gửi xhrFields : ( withCredentials: true // được hỗ trợ trong jQuery 1.5.1 + ) ) );
chấp nhận (mặc định: phụ thuộc vào dataType ).
Loại: PlainObject.
Một tập hợp các cặp khóa/giá trị được gửi tới Chấp nhận tiêu đề yêu cầu. Tiêu đề này cho máy chủ biết loại phản hồi nào mà yêu cầu sẽ chấp nhận để phản hồi. Lưu ý rằng giá trị của tham số được chỉ định trong dataType (loại dữ liệu chúng tôi mong đợi từ máy chủ) được ánh xạ tới giá trị được chỉ định trong tham số. Ngoài ra, để xử lý chính xác phản hồi từ máy chủ, bạn phải chỉ định một hàm trong tham số bộ chuyển đổi trả về giá trị phản hồi đã chuyển đổi. Ví dụ: $.ajax(( chấp nhận : ( mycustomtype: "application/x-some-custom-type " ) , // chỉ định cách xử lý bộ chuyển đổi phản hồi : ("text mycustomtype ": function ( kết quả) ( // trả về giá trị phản hồi đã chuyển đổi return newresult; ) ) , // Kiểu dữ liệu dự kiến ("mycustomtype") dataType : "mycustomtype" ) );
không đồng bộ (mặc định: true ).
Kiểu: Boolean.
Theo mặc định, tất cả các yêu cầu được gửi không đồng bộ; nếu bạn cần sắp xếp các yêu cầu đồng bộ thì hãy đặt tham số này thành false. Lưu ý rằng các truy vấn tên miền chéo và một phần tử có tham số dataType là "jsonp" không hỗ trợ truy vấn ở chế độ đồng bộ. Xin lưu ý rằng bằng cách sử dụng yêu cầu đồng bộ, bạn có thể tạm thời chặn trình duyệt bằng cách vô hiệu hóa mọi hành động trong khi yêu cầu đang hoạt động.
Hàm gọi lại sẽ được gọi trước khi yêu cầu AJAX được thực hiện. Hàm này cho phép bạn thay đổi đối tượng jqXHR (trong jQuery 1.4.x đối tượng XMLHTTPRequest) trước khi nó được gửi. Đối tượng jqXHR là một add-on mở rộng đối tượng XMLHttpRequest, đối tượng chứa nhiều thuộc tính và phương thức cho phép bạn nhận được nhiều hơn đầy đủ thông tin về phản hồi của máy chủ và đối tượng cũng chứa các phương thức Promise. Nếu hàm beforeSend trả về false thì yêu cầu AJAX sẽ bị hủy. Kể từ phiên bản jQuery 1.5 hàm beforeSend sẽ được gọi bất kể loại yêu cầu.
bộ đệm (mặc định: true, đối với dataType "kịch bản" Và "jsonp" SAI ).
Kiểu: Boolean.
Nếu được đặt thành sai, điều này sẽ khiến các trang được yêu cầu không được trình duyệt lưu vào bộ nhớ đệm. Lưu ý rằng sai sẽ chỉ hoạt động chính xác với CÁI ĐẦU Và LẤY yêu cầu.
hoàn thành.
Loại: Hàm(jqXHR jqXHR, Sợi dây văn bảnTrạng thái).
Một hàm được gọi khi yêu cầu kết thúc (chức năng này được thực thi sau các sự kiện AJAX "thành công" hoặc "lỗi"). Hai tham số được truyền vào hàm: jqXHR(trong đối tượng jQuery 1.4.x Yêu cầu XMLHTTP) và một dòng tương ứng với trạng thái yêu cầu ( "thành công", "không sửa đổi", "không có nội dung", "lỗi", "hết giờ", "sự phá thai", hoặc "lỗi phân tích cú pháp"). Kể từ jQuery 1.5, tham số hoàn chỉnh có thể chấp nhận một mảng hàm sẽ được gọi lần lượt.
nội dung.
Loại: PlainObject.
Một đối tượng bao gồm các cặp chuỗi/regex xác định cách jQuery sẽ xử lý (phân tích cú pháp) phản hồi tùy thuộc vào loại nội dung. Đã thêm vào jQuery 1.5.
contentType (mặc định: "application/x-www-form-urlencoded; bộ ký tự=UTF-8").
Kiểu: Boolean hoặc Chuỗi.
Xác định loại nội dung được chỉ định trong yêu cầu khi gửi dữ liệu đến máy chủ. Kể từ jQuery 1.6, có thể chỉ định giá trị false, trong trường hợp đó jQuery không chuyển trường trong tiêu đề Loại nội dungở tất cả.
bối cảnh.
Loại: PlainObject.
Khi thực thi các hàm gọi lại AJAX, bối cảnh thực thi của chúng là đối tượng cửa sổ. Tham số bối cảnh cho phép bạn định cấu hình bối cảnh thực thi hàm để $(this ) sẽ tham chiếu đến một thành phần hoặc đối tượng DOM cụ thể. Ví dụ: $.ajax(( url : "test.html ", context : $(".myClass "), // bối cảnh thực thi hàm mới thành công : function ()( // nếu yêu cầu thành công, hãy gọi hàm $ (this .html ("Mọi thứ đều ổn"); // thêm nội dung văn bản vào phần tử bằng class.myClass ) ) );
bộ chuyển đổi
Giá trị mặc định:
( "* text ": window.String, // bất kỳ loại nào trong văn bản "text html": true, // text in html "text json": jQuery.parseJSON, // text in JSON "text xml": jQuery.parseXML // văn bản dạng XML) Loại: PlainObject.
Một đối tượng chứa kiểu dữ liệu cần chuyển đổi và cách chuyển đổi nó. Giá trị của mỗi bộ chuyển đổi là một hàm trả về giá trị phản hồi đã được chuyển đổi. Đã thêm vào jQuery 1.5.
crossDomain (mặc định: sai đối với các yêu cầu trong cùng một tên miền, đúng đối với các yêu cầu trên nhiều tên miền).
Kiểu: Boolean.
Nếu bạn muốn thực hiện yêu cầu tên miền chéo trong cùng một tên miền (ví dụ: yêu cầu jsonp), thì hãy đặt tham số này thành true . Ví dụ: điều này sẽ cho phép chuyển hướng yêu cầu đến một miền khác từ máy chủ của bạn. Đã thêm vào jQuery 1.5.
Loại: PlainObject, hoặc String, hoặc Array.
Dữ liệu sẽ được gửi đến máy chủ. Nếu chúng không phải là một chuỗi, chúng sẽ được chuyển đổi thành chuỗi truy vấn. Vì LẤY yêu cầu, chuỗi sẽ được thêm vào URL. Để ngăn chặn xử lý tự động bạn có thể sử dụng tham số processData với giá trị false . Nếu dữ liệu được truyền như một phần của đối tượng thì nó phải bao gồm các cặp khóa/giá trị. Nếu giá trị là một mảng, jQuery tuần tự hóa nhiều giá trị với cùng một khóa (tùy thuộc vào giá trị của tham số truyền thống, điều này cho phép kiểu tuần tự hóa truyền thống dựa trên phương thức $.param).
dataFilter.
Loại: Hàm(Chuỗi dữ liệu, Sợi dây kiểu) => Bất cứ điều gì .
Hàm này được gọi sau khi hoàn thành thành công yêu cầu AJAX và cho phép bạn xử lý dữ liệu “thô” nhận được từ phản hồi của máy chủ. Việc trả lại dữ liệu phải xảy ra ngay sau khi xử lý. Hàm này có hai đối số: dữ liệu- dữ liệu nhận được từ máy chủ ở dạng chuỗi và kiểu- loại dữ liệu này (giá trị của tham số dataType).
kiểu dữ liệu (mặc định: xml, json, kịch bản, hoặc html).
Loại: Chuỗi.
Xác định loại dữ liệu bạn mong đợi nhận được từ máy chủ. Nếu kiểu dữ liệu không được chỉ định thì jQuery sẽ cố gắng xác định nó dựa trên kiểu MIME từ phản hồi ( XML kiểu MIME sẽ dẫn đến XML, kể từ jQuery 1.4 json sẽ đưa ra một đối tượng JavaScript, kịch bản sẽ thực thi tập lệnh và mọi thứ khác sẽ được trả về dưới dạng chuỗi).
Các kiểu cơ bản (kết quả được chuyển làm đối số đầu tiên cho hàm gọi lại thành công):
Trong thời đại mạng hiện đại, hầu hết các trang web đang trở nên tương tác hơn. Nếu trước đây, để nhận được dữ liệu cập nhật, chúng ta phải làm mới toàn bộ trang thì giờ đây đã xuất hiện các công nghệ cho phép chúng ta không tải toàn bộ trang mà chỉ tải một phần riêng biệt của trang đó. Đổi lại, điều này mang lại sự thuận tiện cho cả người dùng và chủ sở hữu máy chủ, vì trang sẽ tải nhanh hơn cho người dùng vì chỉ một phần riêng biệt của trang được tải và máy chủ không cần phải tạo trang mỗi lần và đưa nó cho người dùng. Những khả năng này rất dễ thực hiện với trợ giúp về php và ajax.
Hôm nay chúng ta sẽ xem xét ví dụ nhỏđể hiểu rõ hơn về cách thức hoạt động của khái niệm AJAX. Đôi khi người mới bắt đầu khó hiểu cách php và ajax tương tác với nhau; nhiều người đang tìm kiếm ví dụ về cách xác thực biểu mẫu một cách nhanh chóng mà không cần tải lại toàn bộ trang. Tôi sẽ chỉ cho bạn cách thực hiện việc này một cách ngắn gọn để bạn có thể hiểu những điều cơ bản và nguyên tắc sẽ cho phép bạn thành thạo các công cụ khác nhanh hơn và viết tập lệnh của riêng mình trong tương lai.
Hãy tự mình nghĩ ra một nhiệm vụ nhỏ, chúng ta sẽ kiểm tra sự hiện diện của địa chỉ email trong cơ sở dữ liệu mà không cần tải lại trang bằng php và ajax. Ví dụ này sẽ chứng minh rõ cách chúng ta có thể tương tác với máy chủ mà không cần tải lại trang trong trình duyệt, đồng thời, ví dụ này thường được sử dụng cho nhiều loại xác thực biểu mẫu người dùng khác nhau. Trong thư mục gốc chúng ta sẽ tạo 3 file có tên là index.php, email.php, valid.js.
Tạo một trangHãy tạo một trang đơn giản với một biểu mẫu chỉ chứa một trường để nhập email.
Cú pháp tệp Index.php
Hướng dẫn AJAX
Cách dễ nhất để làm việc với AJAX là kết nối khung công tác jQuery, đó chính xác là những gì tôi đã làm. jQuery cung cấp cho chúng ta một cú pháp dễ hiểu và dễ sử dụng để gửi các yêu cầu AJAX, vậy tại sao bạn không tận dụng nó?
Tạo tập lệnh jsCú pháp của tệp xác thực.js
$(document).ready(function())( var email = ""; $("#email").keyup(function())( var value = $(this).val(); $.ajax(( gõ: "POST", url:"email.php", data:"email="+value, thành công:function(msg)( if(msg == "valid")( $("#message").html( "Email này có thể được sử dụng. Email này đã được sử dụng."); ) ) )); )); $("#submit").click(function())( if(email == "")( cảnh báo( "Vui lòng đặt dữ liệu vào tất cả email"); )else( $.ajax(( type: "POST", url:"email.php", data:"add_email="+email, Success:function(msg)( $ ("#message" ).html(tin nhắn); ) )); ) )); ));
Trình xử lý PHPScript này sẽ nhận được yêu cầu POST từ client, xử lý nó và trả về kết quả. AJAX đọc kết quả và đưa ra quyết định dựa trên kết quả đó.
Cú pháp tệp email.php
$connection = mysqli_connect("localhost","email","email","email"); if(isset($_POST["email"]) && $_POST["email"] != "")( $email = $_POST["email"]; $email = mysqli_real_escape_string($connection,$email); if (!filter_var($email, FILTER_VALIDATE_EMAIL))( echo "invalid"; )else( $sql = "SELECT id FROM email WHERE email="$email""; $result = mysqli_query($connection,$sql); if( mysqli_num_rows($result) == 1)( echo "invalid"; )else( echo "valid"; ) ) ) if(isset($_POST["add_email"]) && $_POST["add_email"] != "" )( $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "CHÈN VÀO email(email) GIÁ TRỊ("$email")"; if(mysqli_query($connection,$sql))( echo Thành công"; )else( echo "Lỗi"; ) )
Trong tập lệnh PHP của chúng tôi, mã phổ biến nhất xử lý yêu cầu đăng bài và in văn bản nhất định trên trang. Kết quả là AJAX gửi yêu cầu tập lệnh php, script xử lý và đưa ra kết quả, AJAX đọc kết quả và thay đổi trang theo thời gian thực.
AJAX gửi yêu cầu POST tới tập lệnh bằng đoạn mã này:
$.ajax(( type:"POST", url:"email.php", data:"email="+value, thành công:function(msg)( if(msg == "valid")( $("#message ").html("Email này có thể được sử dụng."); email = value; )else( $("#message").html("Email này đã được sử dụng."); ) ) ));
loại - Loại yêu cầu, POST hoặc GET. Trong trường hợp của chúng tôi POST;
url - địa chỉ của tập lệnh mà yêu cầu được gửi tới;
dữ liệu - dữ liệu được truyền đi trong yêu cầu;
thành công - phải làm gì khi thực hiện yêu cầu thành công. Trong trường hợp của chúng tôi, hàm được gọi;
Trong chính tập lệnh, sự hiện diện của email trong cơ sở dữ liệu sẽ được kiểm tra mỗi khi nhập ký tự vào trường email. Trong tập lệnh, phần $("#email").keyup(function()()); chịu trách nhiệm xử lý đầu vào. , kiểm tra thao tác nhấn phím trong trường có id = "email" .
Như bạn có thể thấy, mã khá đơn giản và không yêu cầu kỹ năng đặc biệt cao để hiểu, mọi thứ đều gắn liền với việc xử lý các sự kiện keyup() - nhấn phím, click() - nhấp chuột vào một phần tử. Tiếp theo là yêu cầu AJAX và phản hồi từ tập lệnh. Do đó, bằng cách sử dụng php và ajax, bạn có thể có được khả năng gần như vô hạn để tạo các trang tương tác.
Mã này không giả vờ là có chất lượng cao, nhưng nếu bạn phát triển nó, hãy thêm các xác thực chính xác ở cấp độ máy khách và máy chủ, đồng thời giới thiệu css thì mã đó có thể được sử dụng trong các dự án của bạn.
Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại viết bình luận.
Chúc bạn Chúc bạn ngày mới tốt lành và hẹn gặp lại bạn sớm :)
Đưa ra yêu cầu tới máy chủ mà không cần tải lại trang. Đây là phương pháp cấp thấp có một lượng lớn cài đặt. Nó làm nền tảng cho hoạt động của tất cả các phương pháp ajax khác. Có hai lựa chọn sử dụng:
url - địa chỉ yêu cầu.
cài đặt - trong tham số này, bạn có thể chỉ định cài đặt cho của yêu cầu này. Được chỉ định bằng cách sử dụng một đối tượng có định dạng (name:value, name:value...) . Không có cài đặt nào được yêu cầu. Bạn có thể đặt cài đặt mặc định bằng phương thức $.ajaxSetup().
↓ tên :type (giá trị mặc định)
Khi yêu cầu được thực hiện, các tiêu đề cho biết loại nội dung được phép mong đợi từ máy chủ. Giá trị của các loại này sẽ được lấy từ tham số Accept.
Theo mặc định, tất cả các yêu cầu không tải lại trang đều diễn ra không đồng bộ (nghĩa là sau khi gửi yêu cầu đến máy chủ, trang sẽ không ngừng hoạt động trong khi chờ phản hồi). Nếu bạn cần thực hiện yêu cầu một cách đồng bộ thì hãy đặt tham số thành false. Không thể thực thi các yêu cầu tên miền chéo và "jsonp" ở chế độ đồng bộ.
Xin lưu ý rằng việc thực hiện các yêu cầu ở chế độ đồng bộ có thể khiến trang bị chặn cho đến khi yêu cầu được hoàn thành đầy đủ.
Trường này chứa một hàm sẽ được gọi ngay trước khi gửi yêu cầu ajax đến máy chủ. Hàm như vậy có thể hữu ích cho việc sửa đổi đối tượng jqXHR (trong phiên bản trước thư viện (tối đa 1,5), XMLHttpRequest được sử dụng thay vì jqXHR). Ví dụ: bạn có thể thay đổi/chỉ định các tiêu đề cần thiết, v.v. Đối tượng jqXHR sẽ được chuyển đến hàm làm đối số đầu tiên. Đối số thứ hai là cài đặt yêu cầu.
Trong trường này, bạn có thể chỉ định các tiêu đề yêu cầu bổ sung. Những thay đổi này sẽ được nhập trước khi gọi beforeSend, nơi có thể thực hiện các chỉnh sửa tiêu đề cuối cùng.
Khi cài đặt này được đặt thành true, yêu cầu sẽ chỉ được thực thi với trạng thái "thành công" nếu phản hồi từ máy chủ khác với phản hồi trước đó. jQuery kiểm tra thực tế này bằng cách xem tiêu đề Sửa đổi lần cuối. Vì jQuery-1.4, ngoài Last-Modified, "etag" cũng được kiểm tra (cả hai đều được máy chủ cung cấp và cần thiết để thông báo cho trình duyệt rằng dữ liệu được yêu cầu từ máy chủ không bị thay đổi so với yêu cầu trước đó) .
Cho phép bạn đặt trạng thái nguồn của một trang thành cục bộ (như thể nó nằm trên giao thức tệp), ngay cả khi jQuery nhận ra nó theo cách khác. Thư viện quyết định rằng trang đang chạy cục bộ trong trường hợp các giao thức sau: tệp, *-extension và widget.
Nên đặt giá trị tham số là địa phương trên toàn cầu - sử dụng hàm $.ajaxSetup() chứ không phải trong cài đặt của các yêu cầu ajax riêng lẻ.
Xác định tên của tham số được thêm vào url trong yêu cầu jsonp (theo mặc định, “gọi lại” được sử dụng - “http://siteName.ru?callback=...").
Kể từ jQuery-1.5, việc đặt tham số này thành false sẽ ngăn không cho tham số bổ sung được thêm vào url. Trong trường hợp này, bạn phải đặt rõ ràng giá trị của thuộc tính jsonpCallback. Ví dụ: (jsonp:false, jsonpCallback:"callbackName") .
Xác định tên của hàm sẽ được gọi khi máy chủ phản hồi yêu cầu jsonp. Theo mặc định, jQuery tạo một tên tùy chỉnh cho hàm này. tùy chọn ưa thích, đơn giản hóa công việc của thư viện. Một trong những lý do để chỉ định chức năng xử lý yêu cầu jsonp của riêng bạn là để cải thiện bộ nhớ đệm của các yêu cầu GET.
Kể từ jQuery-1.5, bạn có thể chỉ định một hàm trong tham số này để tự xử lý phản hồi của máy chủ. Trong trường hợp này, hàm được chỉ định phải trả về dữ liệu nhận được từ máy chủ (trong chức năng được chỉ định chúng sẽ có sẵn trong tham số đầu tiên).
Theo mặc định, tất cả dữ liệu truyền đến máy chủ đều được chuyển đổi trước thành chuỗi (định dạng url: fName1=value1&fName2=value2&...) tương ứng với "application/x-www-form-urlencoded". Nếu bạn cần gửi dữ liệu không thể xử lý được (ví dụ: tài liệu DOM), thì bạn nên tắt tùy chọn processData.
Tham số này được sử dụng cho các yêu cầu ajax tên miền chéo thuộc loại GET, kiểu dữ liệu có thể là "jsonp" hoặc "script". Xác định mã hóa trong đó yêu cầu tên miền chéo sẽ được thực thi. Điều này là cần thiết nếu máy chủ trên miền nước ngoài sử dụng mã hóa khác với mã hóa trên máy chủ của miền gốc.
(Cài đặt này đã được giới thiệu trong jQuery-1.5) một tập hợp các cặp trong đó mã thực thi yêu cầu được liên kết với các hàm sẽ được gọi. Ví dụ: đối với mã 404 (trang không tồn tại), bạn có thể hiển thị thông báo trên màn hình:
$.ajax (( statusCode: ( 404 : function () ( cảnh báo ("Không tìm thấy trang") ; ) ) ) ) ;
Các hàm phản hồi mã thành công của yêu cầu sẽ nhận được các đối số giống như các hàm xử lý yêu cầu thành công (được chỉ định trong tham số thành công) và các hàm phản hồi mã lỗi sẽ giống như các hàm xử lý lỗi.
Một chức năng sẽ được gọi nếu yêu cầu tới máy chủ hoàn thành thành công. Nó sẽ được chuyển qua ba tham số: dữ liệu được gửi bởi máy chủ và đã được xử lý trước (khác với các kiểu dữ liệu khác nhau). Tham số thứ hai là một chuỗi có trạng thái thực thi. Tham số thứ ba chứa đối tượng jqXHR (trong các phiên bản trước của thư viện (tối đa 1.5), XMLHttpRequest được sử dụng thay vì jqXHR). Kể từ jQuery-1.5, thay vì một hàm duy nhất, tham số này có thể chấp nhận một mảng hàm.
Thời gian chờ phản hồi từ máy chủ. Đặt tính bằng mili giây. Nếu vượt quá thời gian này, yêu cầu sẽ được hoàn thành với lỗi và sự kiện lỗi sẽ xảy ra (xem mô tả ở trên), lỗi này sẽ có trạng thái "hết thời gian chờ".
Thời gian được tính kể từ thời điểm hàm $.ajax được gọi. Có thể xảy ra trường hợp một số yêu cầu khác đang chạy tại thời điểm này và trình duyệt sẽ trì hoãn việc thực hiện yêu cầu hiện tại. Trong trường hợp này hết giờ có thể hoàn thành, mặc dù trên thực tế, yêu cầu thậm chí còn chưa được bắt đầu.
Trong jQuery-1.4 trở về trước, khi đối tượng XMLHttpRequest hết thời gian chờ, nó sẽ chuyển sang trạng thái lỗi và việc truy cập vào các trường của nó có thể tạo ra một ngoại lệ. Trong Firefox 3.0+, các yêu cầu tập lệnh và JSONP sẽ không bị hủy nếu hết thời gian chờ. Chúng sẽ được hoàn thành ngay cả khi thời gian này đã hết.
Một hàm sẽ cung cấp một đối tượng XMLHttpRequest. Theo mặc định, đối với trình duyệt IE, đối tượng này là ActiveXObject và trong các trường hợp khác nó là XMLHttpRequest. Với tùy chọn này bạn có thể thực hiện phiên bản riêngđối tượng này.
(Cài đặt này đã được giới thiệu trong jQuery-1.5.1) Một tập hợp các cặp (name:value) để thay đổi/thêm giá trị của các trường tương ứng của đối tượng XMLHttpRequest. Ví dụ: bạn có thể đặt thuộc tính withCredentials của nó thành true khi thực hiện yêu cầu tên miền chéo:
$.ajax (( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ) ) ;
Trong jQuery-1.5, thuộc tính withCredentials không được XMLHttpRequest gốc hỗ trợ và sẽ bị bỏ qua trong yêu cầu tên miền chéo. Trong tất cả các phiên bản tiếp theo thư viện, điều này đã được sửa.
Trình xử lý sự kiệnCác cài đặt beforeSend, error, dataFilter, thành công và hoàn chỉnh (mô tả của chúng nằm trong phần trước) cho phép bạn đặt các trình xử lý sự kiện xảy ra tại một số điểm nhất định trong quá trình thực hiện từng yêu cầu ajax.
trướcGửi xảy ra ngay trước khi yêu cầu được gửi đến máy chủ. lỗi xảy ra khi yêu cầu không thành công. bộ lọc dữ liệu xảy ra khi dữ liệu đến từ máy chủ. Cho phép bạn xử lý dữ liệu “thô” do máy chủ gửi. thành công xảy ra khi yêu cầu hoàn thành thành công. hoàn thành xảy ra bất cứ khi nào một yêu cầu hoàn thành.Ví dụ dễ sử dụng. Chúng tôi sẽ hiển thị thông báo khi yêu cầu được hoàn thành thành công:
$.ajax (( url: "ajax/test.html" , thành công: function () ( cảnh báo ("Tải đã được thực hiện." ) ; ) ) );
Bắt đầu với jQuery-1.5, phương thức $.ajax() trả về một đối tượng jqXHR, trong số những thứ khác, thực hiện giao diện trì hoãn, cho phép bạn chỉ định các trình xử lý thực thi bổ sung. Ngoài tiêu chuẩn các phương thức .done(), .fail() và .then() cho đối tượng bị trì hoãn mà bạn có thể cài đặt các trình xử lý, jqXHR còn triển khai .success(), .error() và .complete() . Điều này được thực hiện để tuân theo tên thông thường của các phương thức mà trình xử lý thực hiện yêu cầu ajax được cài đặt. Tuy nhiên, kể từ jQuery-1.8, ba phương thức này sẽ không còn được dùng nữa.
Một số loại yêu cầu, chẳng hạn như yêu cầu jsonp hoặc GET tên miền chéo, không hỗ trợ việc sử dụng các đối tượng XMLHttpRequest. Trong trường hợp này, XMLHttpRequest và textStatus được chuyển tới trình xử lý sẽ chứa giá trị unknown .
Trình xử lý bên trong, biến này sẽ chứa giá trị của tham số bối cảnh. Trong trường hợp nó chưa được đặt, đối tượng này sẽ chứa đối tượng cài đặt.
tham số kiểu dữ liệuHàm $.ajax() tìm hiểu về loại dữ liệu được máy chủ gửi từ chính máy chủ đó (thông qua MIME). Ngoài ra, còn có cơ hội để cá nhân chỉ ra (làm rõ) cách diễn giải những dữ liệu này. Điều này được thực hiện bằng cách sử dụng tham số dataType. Các giá trị có thể có cho tham số này:
"xml"— tài liệu xml thu được sẽ có sẵn ở hình thức văn bản. Bạn có thể làm việc với anh ấy phương tiện chuẩn jQuery (giống như với tài liệu html). "html"— html kết quả sẽ có sẵn ở dạng văn bản. Nếu nó chứa các tập lệnh trong thẻ thì chúng sẽ chỉ được thực thi tự động khi văn bản html được đặt trong DOM. "kịch bản"- dữ liệu nhận được sẽ được thực thi dưới dạng javascript. Các biến thường chứa phản hồi từ máy chủ sẽ chứa đối tượng jqXHR. "json", "jsonp"- dữ liệu nhận được sẽ được chuyển đổi trước thành đối tượng javascript. Nếu phân tích cú pháp không thành công (điều này có thể xảy ra nếu json chứa lỗi), thì ngoại lệ lỗi phân tích cú pháp tệp sẽ được đưa ra. Nếu máy chủ bạn đang truy cập nằm trên một miền khác thì nên sử dụng jsonp thay vì json. Bạn có thể tìm hiểu về json và jsonp trên Wikipedia. "chữ"— dữ liệu nhận được sẽ có sẵn ở dạng văn bản thuần túy, không cần xử lý sơ bộ.Lưu ý 1: Khi một yêu cầu được gửi đến miền của bên thứ ba (điều này chỉ có thể thực hiện được với dataType bằng jsonp hoặc script), trình xử lý lỗi và sự kiện chung sẽ không kích hoạt.
Lưu ý 2: Kiểu dữ liệu được chỉ định trong dataType không được xung đột với thông tin MIME do máy chủ cung cấp. Ví dụ: dữ liệu xml phải được máy chủ biểu thị dưới dạng text/xml hoặc application/xml . Nếu điều này không thành công, jquery sẽ cố gắng chuyển đổi dữ liệu đã nhận sang loại được chỉ định (thông tin thêm về điều này trong phần Bộ chuyển đổi).
Gửi dữ liệu đến máy chủTheo mặc định, yêu cầu tới máy chủ được thực hiện bằng phương thức HTTP GET. Đưa ra yêu cầu nếu cần thiết phương thức ĐĂNG, bạn cần chỉ định giá trị thích hợp trong cài đặt loại. Dữ liệu được gửi bằng phương thức POST sẽ được chuyển đổi thành UTF-8 nếu nó ở dạng mã hóa khác, theo yêu cầu của tiêu chuẩn W3C XMLHTTPRequest.
Tham số dữ liệu có thể được chỉ định dưới dạng chuỗi ở định dạng key1=value1&key2=value2 (định dạng truyền dữ liệu trong url) hoặc dưới dạng đối tượng có tập hợp các cặp (tên:giá trị) - (key1: "value1", key2: "giá trị2") . Trong trường hợp sau, trước khi gửi dữ liệu jQuery biến đổi đối tượng nhất định thành một chuỗi bằng cách sử dụng $.param() . Tuy nhiên, chuyển đổi này có thể được đảo ngược bằng cách đặt cài đặt processData thành false. Việc chuyển đổi thành chuỗi là điều không mong muốn, chẳng hạn như trong trường hợp gửi một đối tượng xml đến máy chủ. Trong trường hợp này, bạn nên thay đổi cài đặt contentType từ ứng dụng/x-www-form-urlencoded sang một loại mime phù hợp hơn.
Bình luận: Hầu hết các trình duyệt không cho phép các yêu cầu Ajax đối với các tài nguyên có tên miền, tên miền phụ và giao thức khác với giao thức hiện tại. Tuy nhiên, giới hạn này không áp dụng cho các yêu cầu jsonp và script.
Nhận dữ liệu từ máy chủDữ liệu nhận được từ máy chủ có thể được cung cấp dưới dạng chuỗi hoặc đối tượng, tùy thuộc vào giá trị của tham số dataType (xem dataType ở trên). Dữ liệu này luôn có sẵn trong tham số đầu tiên của trình xử lý thực thi yêu cầu ajax:
$.ajax (( url: "some.php" , thành công: hàm (dữ liệu) ( cảnh báo ("Dữ liệu lợi nhuận: " + data ) ; ) ) );
Đối với các loại văn bản và xml, dữ liệu được máy chủ gửi cũng sẽ có sẵn trong jqXHR, cụ thể là trong các trường replyText hoặc replyXML tương ứng.
Cài đặt nâng caoBằng cách sử dụng tham số chung, bạn có thể vô hiệu hóa việc thực thi các trình xử lý sự kiện (.ajaxSend(), .ajaxError(), v.v.) cho các yêu cầu riêng lẻ. Điều này có thể hữu ích, chẳng hạn như nếu việc tải hoạt ảnh được bắt đầu/dừng trong các trình xử lý này. Sau đó, nếu một số yêu cầu được thực thi rất thường xuyên và nhanh chóng, thì việc vô hiệu hóa việc thực thi các trình xử lý sẽ rất hữu ích đối với chúng. Đối với các yêu cầu tập lệnh và jsonp trên nhiều miền, tham số chung sẽ tự động bị tắt.
Nếu cần có dữ liệu xác thực (thông tin đăng nhập/mật khẩu) để gửi yêu cầu đến máy chủ thì bạn có thể chỉ định dữ liệu đó trong cài đặt tên người dùng và mật khẩu của yêu cầu ajax.
Để thực hiện một yêu cầu tới máy chủ phải mất thời gian nhất định. Nếu máy chủ không gửi phản hồi trong thời gian này, yêu cầu sẽ kết thúc với lỗi (trạng thái "hết thời gian"). Thời gian chờ phản hồi từ máy chủ có thể được thay đổi bằng cách đặt giá trị bắt buộc (tính bằng mili giây) trong cài đặt thời gian chờ.
Có thể xảy ra trường hợp mã hóa máy chủ khác với mã hóa của tệp javascript được yêu cầu trong yêu cầu ajax. Trong những trường hợp như vậy, cần phải chỉ định mã hóa sau trong cài đặt scriptCharset.
Trong hầu hết các trường hợp, yêu cầu Ajax xảy ra không đồng bộ, nhưng trong một số trường hợp, có thể cần phải thực hiện yêu cầu một cách tuần tự (khi không thể thực thi thêm tập lệnh nếu không nhận được phản hồi từ máy chủ). Bạn có thể thực hiện yêu cầu đồng bộ nếu bạn tắt cài đặt không đồng bộ. Tuy nhiên, cần nhớ rằng trong trường hợp này trang sẽ bị treo trong khi chờ phản hồi từ máy chủ.
Ví dụ về việc sử dụngTrường hợp sử dụng đơn giản nhất là gọi $.ajax() mà không chỉ định tham số:
$.ajax(); // một yêu cầu GET sẽ được gửi đến máy chủ tới URL của trang hiện tại mà không chỉ định bất kỳ tham số nào.
Nếu bạn cần tải và thực thi tệp js, bạn có thể làm như thế này:
$.ajax (( type: "GET", url: "test.js", dataType: "script" ) );
Hãy tạo một yêu cầu POST tới máy chủ, chỉ định hai tham số và thông báo cho người dùng về yêu cầu đã hoàn thành thành công:
$.ajax (( type: "POST" , url: "some.php" , data: "name=John&location=Boston" , thành công: function (msg) ( cảnh báo ("Dữ liệu đã đến: " + msg ) ; ) ) ) ;
Hãy cập nhật nội dung của trang html mong muốn:
$.ajax (( url: "test.html" , cache: false , thành công: function (html) ( $("#results" ) .append (html) ; ) ) ) ;
Hãy thực hiện một yêu cầu đồng bộ đến máy chủ. Trong khi yêu cầu đang được thực thi, trang sẽ không phản hồi hành động của người dùng:
// ghi dữ liệu được gửi từ máy chủ vào biến html var html = $.ajax (( url: "some.php", async: false ) ) .responseText ;
Với tư cách là một tham số, chúng tôi sẽ gửi một đối tượng xml đến máy chủ. Để truyền nó một cách chính xác, bạn phải hủy chuyển đổi sơ bộ các tham số (processData:false). Chúng tôi sẽ chỉ định hàm tùy chỉnh handResponse làm trình xử lý để hoàn thành yêu cầu thành công:
var xmlDocument = [tạo tài liệu xml] ; $.ajax (( url: "page.php", processData: false , data: xmlDocument, thành công: handResponse ) );
Phương pháp tiếp cận nâng caoBắt đầu với jQuery-1.5, có ba hướng mới cho phép bạn sử dụng $.ajax() sâu hơn nữa. Bộ đầu tiên trong số chúng (Bộ lọc trước) cho phép bạn thực hiện các thao tác bổ sung ngay trước khi gửi yêu cầu. Với cách tiếp cận thứ hai (Bộ chuyển đổi), bạn có thể cho jQuery biết cách chuyển đổi dữ liệu nhận được từ máy chủ nếu nó không khớp với định dạng mong đợi. Cách tiếp cận thứ ba (Transports) là mức thấp nhất, nó cho phép bạn tổ chức yêu cầu đến máy chủ một cách độc lập.
Bộ lọc sơ bộCách tiếp cận này bao gồm việc thiết lập một trình xử lý được gọi trước khi mỗi yêu cầu ajax được thực hiện. Trình xử lý này đi trước việc thực thi bất kỳ trình xử lý ajax nào khác. Nó được cài đặt bằng hàm $.ajaxPrefilter():
$.ajaxPrefilter (hàm (tùy chọn, originalOptions, jqXHR) ( ) ) ;
Ở đâu
tùy chọn- cài đặt của yêu cầu hiện tại,
Tùy chọn gốc- thiết lập mặc định,
jqXHR- đối tượng jqXHR của yêu cầu này.
Bộ lọc trước thuận tiện cho việc xử lý các cài đặt tùy chỉnh (nghĩa là các cài đặt mới không xác định đối với thư viện được chỉ định trong yêu cầu). Ví dụ: bạn có thể nhập thiết lập riêng abortOnRetry , khi được bật, các yêu cầu chưa hoàn thành sẽ được đặt lại nếu nhận được yêu cầu sau tại cùng một url:
var currentRequests = ( ) ; $.ajaxPrefilter (hàm (options, originalOptions, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ; ) ) ) ;
Thuận tiện cho việc xử lý và cài đặt hiện có. Ví dụ: đây là cách bạn có thể thay đổi yêu cầu tên miền chéo thành yêu cầu được chuyển hướng qua máy chủ tên miền của bạn:
$.ajaxPrefilter (hàm (tùy chọn) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + EncodeURIComponent( options.url ) ; options.crossDomain = false ; ) ) ;
Ngoài ra, bạn có thể chỉ định các giá trị dataType mà bộ lọc trước sẽ hoạt động trên đó. Vì vậy, ví dụ: bạn có thể chỉ định loại json và tập lệnh:
$.ajaxPrefilter ("json script" , function (options, originalOptions, jqXHR) ( // Thay đổi tùy chọn, kiểm tra cài đặt cơ bản(originOptions) và đối tượng jqXHR) );
Cuối cùng, bạn có thể thay đổi giá trị dataType để trả về giá trị mong muốn:
$.ajaxPrefilter (function (options) ( // thay đổi dataType thành script nếu url đáp ứng các điều kiện nhất định if (isActuallyScript(options.url) ) ( return "script" ; ) );
Cách tiếp cận này đảm bảo không chỉ rằng yêu cầu sẽ thay đổi loại của nó thành tập lệnh mà còn các trình xử lý lọc trước khác chỉ định loại này trong tham số đầu tiên cũng sẽ được thực thi.
Bộ chuyển đổiNguyên tắc này bao gồm việc cài đặt một trình xử lý sẽ hoạt động nếu kiểu dữ liệu được chỉ định trong cài đặt không khớp với kiểu dữ liệu được máy chủ gửi.
Bộ chuyển đổi là cài đặt ajax, do đó có thể được đặt trên toàn cầu:
// bằng cách này, bạn có thể thiết lập một trình xử lý sẽ hoạt động nếu, thay vì // loại mydatatype bạn đã chỉ định trong dataType, dữ liệu thuộc loại text được nhận $.ajaxSetup (( bộ chuyển đổi: ("text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // xử lý văn bản được truyền return mydatatypeValue; ) else ( // nếu dữ liệu được gửi bởi máy chủ không tương ứng với những gì được mong đợi, // bạn có thể ném một ngoại lệ. ném ngoại lệObject; ) ) ) ) ;
Bộ chuyển đổi sẽ giúp bạn khi giới thiệu Kiểu dữ liệu (tùy chỉnh) của riêng bạn. Điều quan trọng cần lưu ý là tên của kiểu dữ liệu đó chỉ nên sử dụng chữ thường! Yêu cầu về kiểu dữ liệu "mydatatype" được đề cập ở trên có thể trông như thế này:
$.ajax (url, (dataType: "mydatatype" ) );
Heh, tôi luôn muốn viết một trong những bài đăng "X được coi là có hại".
Trước khi bắt đầu, hãy để tôi nói điều này: Tôi tin rằng jQuery đã có tác động đáng kinh ngạc đến sự phát triển của Web. Nó cho phép các nhà phát triển làm những việc mà trước đây được coi là không thể tưởng tượng được. Buộc các nhà sản xuất trình duyệt phải triển khai nhiều tính năng nguyên bản (nếu không có jQuery, có lẽ chúng ta sẽ không bao giờ có document.querySelectorAll). jQuery vẫn cần thiết cho những người không thể dựa vào các tính năng hiện đại và buộc phải hỗ trợ những thứ cũ như IE8 hoặc tệ hơn.
Tuy nhiên, dù tôi rất thông cảm với những kẻ tội nghiệp này thì họ cũng chỉ là thiểu số. Ngày nay đã có rất nhiều nhà phát triển không cần hỗ trợ các trình duyệt cũ hơn với thị phần nhỏ bé của họ. Và đừng quên những người không phải là nhà phát triển chuyên nghiệp: sinh viên và nhà nghiên cứu, họ không những không quan tâm đến tất cả chức năng đa trình duyệt này mà họ còn thường không cần bất cứ thứ gì ngoại trừ một trình duyệt duy nhất! Bạn có thể mong đợi rằng trong giới học thuật, mọi người đều hài lòng khi sử dụng các tính năng mới của Nền tảng Web Mở? Nó thậm chí còn chưa đến gần, jQuery ở khắp mọi nơi. Tại sao? Bởi vì jQuery là tất cả những gì họ biết nên đơn giản là họ không có năng lượng hoặc thời gian để theo kịp các bước phát triển web mới. Họ không cần lý do để sử dụng jQuery, chỉ cần sử dụng nó là được. Bất chấp thực tế này và khả năng thực hiện tất cả những điều này một cách tự nhiên, tôi vẫn tin rằng đây không phải là lý do chính để tránh jQuery.
- …và như thế. Chỉ google “bạn không cần jQuery” và bạn sẽ tràn ngập lời khuyên.
Tuy nhiên, những liên kết này luôn xuất hiện trong các dự án thực tế. Cho dù jQuery có cố gắng trừu tượng hóa chúng đến mức nào, bạn vẫn phải liên tục thao tác với chúng, ngay cả khi chỉ bằng cách gói các tham chiếu này trong $(). Ví dụ: bối cảnh gọi lại trong trường hợp lệnh gọi phương thức jQuery .bind() sẽ là tham chiếu đến phần tử home chứ không phải bộ sưu tập jQuery. Cũng cần lưu ý rằng bạn thường sử dụng các thư viện từ nguồn khác nhau, một số cần jQuery còn một số thì không. Tất cả điều này dẫn đến thực tế là đầu ra là một hỗn hợp khủng khiếp của các phần tử gốc, danh sách các nút và đối tượng jQuery.
Nếu nhà phát triển tuân theo quy ước đặt tên của các đối tượng jQuery (thêm $ trước tên biến) và các biến thông thường chứa tham chiếu đến các phần tử gốc thì điều này chắc chắn sẽ giảm thiểu vấn đề (mặc dù mọi người có xu hướng quên bất kỳ quy ước nào, nhưng hãy giả sử chúng ta đang sống trong một thế giới Thế giới lý tưởng). Tuy nhiên, trong hầu hết các trường hợp, các nhà phát triển chưa bao giờ nghe nói về những quy ước như vậy và kết quả là mã của họ cực kỳ khó hiểu đối với những người chưa quen với nó. Mọi nỗ lực chỉnh sửa mã như vậy đều tiềm ẩn rất nhiều lỗi theo kiểu “Ồ, chết tiệt, đây không phải là một đối tượng jQuery, tôi quên bọc nó trong $()” hoặc “Chết tiệt, đó không phải là một phần tử chung, tôi quên mất hãy vượt qua $(..)” . Để tránh bối rối, các nhà phát triển thường gói mọi thứ trong $(), để đề phòng. Đọc mã sau, bạn có thể thấy rằng cùng một biến được gói trong $() nhiều lần. Vì lý do tương tự, việc cấu trúc lại mã này để nó không sử dụng jQuery trở nên rất khó khăn. Vì vậy, về cơ bản chúng ta nhận được một tình huống vô vọng.
Ngay cả khi bạn tuân thủ nghiêm ngặt các quy ước đặt tên biến, vẫn thường có những trường hợp bạn cần gọi một phương thức gốc trên phần tử chính hoặc chạy một hàm từ mã không dựa vào jQuery. Và sau một thời gian, mã của bạn sẽ được lấp đầy từ trên xuống dưới bằng các bản dịch các đối tượng từ jQuery sang mã gốc và ngược lại.
Giả sử sau một thời gian, bạn quyết định thêm một vài tính năng nữa cho chương trình tương tự và trong hầu hết các trường hợp, bạn sẽ kết thúc việc gói lại tất cả các tham chiếu mới đến các thành phần và bộ sưu tập gia đình trong $(). Rốt cuộc, không phải lúc nào bạn cũng biết chính xác trong trường hợp nào bạn sẽ cần liên kết này hoặc liên kết kia. Thế là một lần nữa cô ấy tình huống vô vọng, điều này cũng áp dụng cho tất cả các mã trong tương lai!
Lấy bất kỳ tập lệnh ngẫu nhiên nào có phần phụ thuộc jQuery và cố gắng loại bỏ phần phụ thuộc này. Họ trốn chạy. Bạn sẽ thấy rằng nhiệm vụ chính của bạn không phải là chuyển đổi các phương thức thành phương thức gốc mà là hiểu một cách khái quát điều gì đang diễn ra ở đây.
Con đường thực dụng đến với JS thuần túy Tất nhiên, nhiều thư viện ngày nay yêu cầu jQuery và như tôi gần đây
