เมื่อเร็ว ๆ นี้ฉันได้มีส่วนร่วมในการดำเนินงาน Ajax จำนวนมากและฉันต้องทำสิ่งที่ฉันควรทำในพื้นหลัง ฟังก์ชั่น AJAX ที่ฉันใช้ตอนนี้ถูกห่อหุ้มโดยบุคลากรพื้นหลัง - แต่มันขึ้นอยู่กับ jQuery Ajax ดังนั้นมันจะไร้ประโยชน์หากไม่มี jQuery และฉันคิดว่าวิธีการ Ajax ของ jQuery นั้นสมบูรณ์มากและสามารถใช้งานได้โดยตรง หากมี jQuery Ajax ของเขาจะไม่ถูกใช้อย่างไร้ประโยชน์ สิ่งที่ฉันขาดคือวิธี AJAX ที่สามารถใช้งานได้โดยไม่ต้องใช้ jQuery
ดังนั้นฉันจึงใช้เวลาหนึ่งวันในการเขียนพารามิเตอร์และวิธีการโทรคล้ายกับ Ajax ของ JQuery มันเรียกว่า XHR เพราะ xhr = xmlhttprequest
การคัดลอกรหัสมีดังนี้:
-
* ชื่อ: XHR, ฟังก์ชันการห่อหุ้ม AJAX
* คำอธิบาย: คลาส encapsulation call javax, การเลียนแบบวิธีการโทร Ajax ของ jQuery
* ผู้แต่ง: สิบปีแห่งแสง
-
var xhr = function () {
วาจา
ajax = function () {
return ('xmlhttprequest' ในหน้าต่าง)? การทำงาน () {
ส่งคืน XMLHTTTPREQUEST ใหม่ ();
} : การทำงาน () {
ส่งคืน ActiveXObject ใหม่ ("microsoft.xmlhttp");
-
-
formatData = function (fd) {
var res = '';
สำหรับ (var f ใน fd) {
res+= f+'='+fd [f]+'&';
-
return res.slice (0, -1);
-
ajax = function (ops) {
วาจา
รูท = สิ่งนี้
req = ajax ();
root.url = ops.url;
root.type = ops.type || 'ResponsetExt';
root.method = ops.method || 'รับ';
root.async = ops.async || จริง;
root.data = ops.data || -
root.complete = ops.complete || การทำงาน () {};
root.success = ops.success || การทำงาน(){};
root.error = ops.error || ฟังก์ชั่น {Alert (root.url+'-> สถานะ:'+s+'ข้อผิดพลาด!')};
root.abort = req.abort;
root.setData = function (data) {
สำหรับ (var d ในข้อมูล) {
root.data [d] = data [d];
-
-
root.send = function () {
var datastring = formatData (root.data)
SENDSTRING, GET = FALSE,
async = root.async
เสร็จสมบูรณ์ = root.complete,
วิธี = root.method
type = root.type;
if (method === 'get') {
root.url+= '?'+datastring;
get = true;
-
req.open (method, root.url, async);
ถ้า (! รับ) {
req.setRequestheader ("ประเภทเนื้อหา", "แอปพลิเคชัน/x-www-form-urlencoded");
SENDSTRING = DATASTRING;
-
// รีเซ็ตวิธี OnReadyStateChange ก่อนที่จะส่งมิฉะนั้นคำขอการซิงโครไนซ์ใหม่จะปรากฏขึ้นและการเรียกกลับที่ประสบความสำเร็จสองรายการจะถูกดำเนินการ (Chrome ฯลฯ จะดำเนินการ OnReadyStateChange เมื่อซิงโครไนซ์คำขอ)
req.onreadyStateChange = async? การทำงาน () {
// console.log ('async true');
if (req.readystate == 4) {
สมบูรณ์();
if (req.status == 200) {
root.success (req [type]);
} อื่น {
root.error (req.status);
-
-
} : โมฆะ;
req.send (sendstring);
ถ้า (! async) {
//console.log('async false ');
สมบูรณ์();
root.success (req [type]);
-
-
root.url && root.send ();
-
ฟังก์ชั่น return (ops) {return ใหม่ ajax (ops);}
-
คำอธิบายพารามิเตอร์:
1.URL: ที่อยู่คำขอ คุณไม่สามารถกรอกข้อมูลได้และคำขอจะไม่เริ่มต้น แต่ถ้าคุณไม่กรอกข้อมูลและบังคับให้ส่งฉันจะไม่โทษคุณสำหรับความผิดพลาดใด ๆ
2. วิธีการ: 'รับ' หรือ 'โพสต์' ทั้งหมดเป็นตัวพิมพ์ใหญ่เริ่มต้นได้รับ
3.Data: ข้อมูลที่จะส่งเป็นวัตถุ
4.async: ไม่ว่าจะเป็นแบบอะซิงโครนัสจริงค่าเริ่มต้นจริง
5.Type: ประเภทข้อมูลที่ส่งคืนเป็นเฉพาะ responseText หรือ responsexml และ responseText เริ่มต้น
6.complete: ฟังก์ชั่นดำเนินการเมื่อคำขอเสร็จสมบูรณ์
7. ประสบความสำเร็จ: ฟังก์ชั่นดำเนินการเมื่อคำขอสำเร็จ
8.error: ฟังก์ชั่นดำเนินการเมื่อคำขอล้มเหลว
หมายเหตุ: พารามิเตอร์ประเภทไม่ได้อุดมไปด้วยข้อมูลของ jQuery เฉพาะ responseText หรือ responsexml ใน AJAX ดั้งเดิม หากข้อมูล JSON ถูกส่งคืนคุณจะต้องจัดการด้วยตัวคุณเองในฟังก์ชั่นความสำเร็จเพื่อแปลงข้อความเป็น JSON
ฟังก์ชั่นคำอธิบาย:
มีสองฟังก์ชั่นที่จะใช้สำหรับวัตถุ XHR แบบอินสแตนซ์ หนึ่งคือส่ง วิธีการโทรคือ: xhr.send () โดยไม่มีพารามิเตอร์ ฟังก์ชั่นของมันคือการเริ่มต้นกระบวนการร้องขอ หากไม่มี URL ในระหว่างการเริ่มต้นวิธีการส่งจะไม่ถูกดำเนินการดังนั้นคุณสามารถเพิ่ม URL ในภายหลังและเริ่มส่งด้วยตนเอง - หากไม่มี URL ในระหว่างการส่งคำขอจะล้มเหลวและฉันไม่ได้จัดการกับข้อผิดพลาดนี้ มีเพียงคุณเท่านั้นที่สามารถค้นหาข้อผิดพลาดด้วยตัวเอง
อีกวิธีหนึ่งคือ setData วิธีการโทรคือ XHR.SetData (DATA_OBJ) และพารามิเตอร์ของมันคือวัตถุ ฟังก์ชั่นของวิธี setData คือการแทนที่ค่าบางส่วนในแอตทริบิวต์ข้อมูลของ XHR.Data ตัวอย่างเช่นมีหน้า: 1 ใน xhr.data คุณสามารถใช้ XHR.SetData ({หน้า: 2}) เพื่ออัปเดตค่าโดยไม่ส่งผลกระทบต่อค่าแอตทริบิวต์อื่น ๆ ที่มีอยู่แล้วในข้อมูล
วิธีการโทร:
การคัดลอกรหัสมีดังนี้:
var a1 = xhr ({
URL: '2.PHP',
ข้อมูล:{
'ชื่อผู้ใช้': 'lix',
'รหัสผ่าน': '123456'
'เพศ': 'ชาย',
'interset': 'เล่น'
-
async: เท็จ
วิธี: 'รับ',
ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {
var obj = json.parse (ข้อมูล);
-
-
-
หมายเหตุ: ไม่จำเป็นต้องเขียนใหม่
แนะนำแนะนำ:
หลังจากช่วงเวลาของประสบการณ์โครงการนี้ฉันพบว่าคลาส AJAX ควรมีคุณสมบัติที่พบบ่อยมาก: สะดวกในการเริ่มต้นคำขอซ้ำ ๆ ตัวอย่างเช่นเมื่อฉันเขียนหน้าของ AJAX ในโครงการฉันต้องส่งคำขอทุกครั้งที่ฉันเปิดหน้า แต่ข้อมูลที่ส่งจะไม่เปลี่ยนแปลงยกเว้นหมายเลขหน้าปัจจุบันและจำนวนของแต่ละหน้า หากคุณต้องกำหนดพารามิเตอร์ที่ไม่เปลี่ยนแปลงซ้ำ ๆ ซ้ำ ๆ มันเป็นการสูญเสียทรัพยากรอย่างไม่ต้องสงสัย
ดังนั้นฟังก์ชั่น XHR นี้ได้พิจารณาฟังก์ชั่นนี้แล้ว ยกตัวอย่างการปนเปื้อน เราสามารถเริ่มต้นวัตถุ XHR เมื่อโหลดหน้าเว็บและบันทึกเป็นตัวแปร A1 เมื่อมีการเริ่มต้นคำขอเปิดหน้าจะไม่มีการเปลี่ยนแปลงพารามิเตอร์อื่น ๆ แต่ pagenumber มีการเปลี่ยนแปลง ในเวลานี้เราสามารถเรียกวิธี SetData ของ XHR เพื่อเปลี่ยน pagenumber
การคัดลอกรหัสมีดังนี้:
a1.setData ({pagenumber: 2});
หมายเหตุ: พารามิเตอร์ของ setData ยังเป็นวัตถุ
แน่นอนคุณสามารถแทนที่ข้อมูลได้อย่างสมบูรณ์:
a1.data = {…};
ไม่เพียง แต่ข้อมูลคุณสามารถทำการเปลี่ยนแปลงเพิ่มเติมกับวัตถุ XHR อินสแตนซ์ A1 เช่นการเปลี่ยน URL การเปลี่ยนฟังก์ชั่นความสำเร็จเปลี่ยนไปโพสต์และเปลี่ยนวิธีการแบบซิงโครนัสเป็นแบบอะซิงโครนัส ... หลังจากเปลี่ยนวิธีเรียก A1.Send () และจะเริ่มการร้องขออีกครั้ง
แน่นอนถ้าเป็นคำขอ AJAX อื่นที่ไม่เกี่ยวข้องอย่างสมบูรณ์ไม่จำเป็นต้องบังคับ A1 สำเร็จรูปนี้ เราสามารถสร้างอินสแตนซ์ XHR อื่นที่เรียกว่า A2 หรืออะไรสักอย่าง
หากคุณไม่พอใจกับชื่อ XHR คุณสามารถเปลี่ยนได้ด้วยตัวเองเท่านั้น
นอกจากนี้ยังมีรุ่นเข้ารหัสที่ถูกบีบอัด เวอร์ชันที่ไม่บีบอัดจะลบความคิดเห็นเกี่ยวกับ 2KB และเวอร์ชันที่บีบอัดคือ 1.00KB
การคัดลอกรหัสมีดังนี้:
var xhr = function () {var e = function () {return "xmlhttpRequest" ในหน้าต่าง? function () {ส่งคืน XMlhttpRequest ใหม่}: function () {return new ActivexObject ("microsoft.xmlhttp")}} () e) {t+= n+"="+e [n]+"&"} ส่งคืน t.slice (0, -1)}, n = ฟังก์ชัน (n) {var r = this, i = e (); r.url = n.url; r.type = n.type || "responsetext"; r.method = n.method || "get"; r.async = n.async || true; r.data = n.data || {}; n () {}; r.success = n.success || ฟังก์ชั่น () {}; r.error = n.error || ฟังก์ชั่น (e) {แจ้งเตือน (r.url+"-> สถานะ:"+e+"ข้อผิดพลาด!")}; r.abort = i.abort; r.setData = ฟังก์ชั่น (e) t ใน e) {r.data [t] = e [t]}}; r.send = function () {var e = t (r.data), n, s = false, o = r.async, u = r.complete, a = r.method, f = r.type; ถ้า (a === "รับ") {r.url+= "?"+e; s = tr ue} i.open (a, r.url, o); ถ้า (! s) {i.setrequestheader ("เนื้อหาประเภท", "แอปพลิเคชัน/x-www-form-urlencoded "); n = e} i.onreadyStateChange = o? function () {ถ้า (i.readystate == 4) {u (); ถ้า (i.status == 200) {r.success (i [f ])} else {r.error (i.status)}}}: null; i.send (n); ถ้า (! o) {u (); r.success (i [f])}}; r.url && r.send ()}; return; ฟังก์ชัน (e) {ส่งคืน n ใหม่ n (e)}} ()
จะต้องมีความไม่สมบูรณ์ใน XHR หากคุณพบในระหว่างการใช้งานในอนาคตฉันจะแก้ไขให้ทันเวลา หากคุณไม่พอใจกับมันหรือพบว่าไม่เพียงพอโปรดให้คำแนะนำสำหรับการปรับปรุง