Ajax هو اختصار JavaScript غير المتزامن و XML ، وهي آلية لتحديث جزء معين من الصفحة. يمنحك القدرة على تحديث جزء من الصفحة بعد الحصول على بيانات من الخادم ، وبالتالي تجنب تحديث الصفحة بأكملها. بالإضافة إلى ذلك ، فإن تحقيق تحديثات الصفحة المحلية بهذه الطريقة لا يمكن فقط إنشاء تجربة مستخدم سلسة فحسب ، ولكن أيضًا تقليل التحميل على الخادم.
فيما يلي تحليل لطلب AJAX الأساسي:
var xhr = new xmlhttprequest () ؛ xhr.open ('get' ، 'send-ajax-data.php') ؛ xhr.send (null) ؛هنا ، نقوم بإنشاء مثيل لفئة يمكنها تقديم طلبات HTTP إلى الخادم. ثم يتم استدعاء طريقة المفتوحة الخاصة به ، حيث تكون المعلمة الأولى هي طريقة طلب HTTP والمعلمة الثانية هي عنوان URL لصفحة الطلب. أخيرًا ، نسمي طريقة إرسال مع المعلمة NULL. إذا كنت تستخدم طريقة طلب POST (نستخدمها للحصول على هنا) ، فيجب أن تحتوي معلمات طريقة الإرسال على أي بيانات تريد إرسالها.
إليكم كيف نتعامل مع استجابة الخادم:
XHR.OnReadyStateChange = function () {var done = 4 ؛ // ReadyState 4 يعني أنه تم إرسال الطلب إلى الخادم var ok = 200 ؛ // status 200 يعني أن الخادم يعود بنجاح إذا (xhr.readyState === done) {if (xhr.status === ok) {console.log (xhr.responsetext) ؛ // هذا هو النص الذي تم إرجاعه} آخر {console.log ("خطأ:"+ xhr.status) ؛ حدث خطأ في هذا الطلب}}}onReadyStateChange غير متزامن ، وهذا يعني أنه سيتم استدعاؤه في أي وقت. يسمى هذا النوع من الوظائف وظيفة رد الاتصال - بمجرد اكتمال بعض المعالجة ، يطلق عليه. في هذه الحالة ، تحدث هذه المعالجة على الخادم.
مثال
إن طريقة Ajax المريحة هي أيضًا السبب في أن العديد من الأشخاص يعتمدون على jQuery ، ولكن في الواقع ، فإن Ajax API من JavaScript الأصلي قوي أيضًا ، والاستخدام الأساسي لا يختلف كثيرًا في كل متصفح. لذلك ، يمكنك تغليف كائن Ajax بنفسك تمامًا. فيما يلي كائن Ajax المغلف:
// ajax method // lazy load create xhr object function createxhr () {if ('xmlhttprequest' in window) {createxhr = function () {return new xmlhttprequest () ؛ } ؛ } آخر إذا ('activexObject' في النافذة) {createxhr = function () {return new ActiveXObject ("msxml2.xmlHtp") ؛ } ؛ } آخر {createxhr = function () {رمي خطأ جديد ("Ajax غير مدعوم من هذا المتصفح") ؛ } ؛ } return createxhr () ؛ } // Ajax تنفيذ طلب الوظيفة (ajaxdata) {var xhr = createxhr () ؛ ajaxdata.before && ajaxdata.before () ؛ // التعامل مع الطلبات غير المتزامنة من خلال الأحداث XHR.OnReadyStateChange = function () {if (xHr.ReadyState == 4) {if (xhr.status == 200) {if (ajaxdata.datatype == 'json') json1 = eval ('(' + jsonstr + ')') ، json2 = (وظيفة جديدة ('return' + jsonstr)) () ؛ ajaxdata.callback (json2) ؛ // ajaxdata.callback (json.parse (xhr.responsetext)) ؛ // الطريقة الأصلية ، غير مدعومة في IE6/7} آخر ajaxdata.callback (xhr.responsetext) ؛ } else {ajaxdata.error && ajaxdata.error (xhr.responsetext) ؛ }}} ؛ // تعيين معلمات الطلب XHR.Open (ajaxdata.type ، ajaxdata.url) ؛ if (ajaxdata.nocache == true) xhr.setRequestHeader ('if modified-since' ، '0') ؛ if (ajaxdata.data) {xhr.setRequestHeader ('type-type' ، 'application/x-www-form-urlencoded') ؛ XHR.SEND (AJAXDATA.DATA) ؛ } آخر {؟ ؟ XHR.SetRequestHeader ('x-requested-with' ، 'xmlhttprequest') ؛ XHR.SEND (NULL) ؛ } إرجاع XHR ؛} وظيفة الوظيفة (ajaxdata) {ajaxdata.type = 'post' ؛ var _result = request (ajaxdata) ؛ return _result ؛} وظيفة الحصول على (ajaxdata) {ajaxdata.type = 'get' ؛ ajaxdata.data = null ؛ var _result = request (ajaxdata) ؛ العودة _result ؛}فيما يلي مثال على الاستخدام:
index.html
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> تنفيذ JavaScript الأصلي ajax </title> <link rel = "stylesheet" type = "text/css" media = "href =". Font-Family: 'Lucida Grande' ، 'Microsoft yahei'} #content .btn_ctr {display: block ؛ العرض: 120 بكسل ؛ الارتفاع: 30 بكسل ؛ الهامش: 0 Auto 20px ؛ الخلفية: #53A7BB ؛ اللون: #fff ؛ خط الرصيف: جريئة ؛ حجم الخط: 14px ؛ ارتفاع الخط: 30 بكسل ؛ تدمير النص: لا شيء ؛ الحدود الحدودية: 4px ؛ } #test {width: 280px ؛ الارتفاع: 130 بكسل ؛ الهامش: 0 Auto ؛ الحشو: 15 بكسل ؛ الخلفية: #fff ؛ الحدود الحدودية: 4px ؛ محاذاة النص: اليسار ؛ } </style> </head> <body> <div id = "header"> <div id = "header-content"> <div id = "header-inside"> <p> <a href = "http://kayosite.com/css3-animation.html" target = "_ blank"> HREF = "http://kayosite.com" target = "_ blank"> مدونتي </a> </p> <p> Demo by Kayo © Copyright 2011-2013 </p> </viv> <h1> css3 Animation </h1> </viv> </div id = "content> <a Href = onClick = "Get ({url: './ajax.html' ، callback: function (out) {document.getElementById ('test'). innerhtml = out ؛}})"> ajax الحصول على محتوى </a> <div id = "test" هنا </script> </body> </html> ajax.html<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8" <title> ajax </title> </head> <pod> <p> تم الحصول على هذا النص بنجاح </p> </body> </html>
لتأثيرات محددة ، يمكنك تصفح العرض التوضيحي الكامل.