自定义ajax支持跨域组件（详细教程）
本篇文章给大家详细分析了自定义ajax支持跨域组件封装相关的知识点，对此有兴趣的朋友参考学习下。
Class.create()分析
仿prototype创建类继承
var Class = {
create: function () {
var c = function () {
this.request.apply(this, arguments);
}
for (var i = 0, il = arguments.length, it; i < il; i++) {
it = arguments[i];
if (it == null) continue;
Object.extend(c.prototype, it);
}
return c;
}
};
Object.extend = function (tObj, sObj) {
for (var o in sObj) {
tObj[o] = sObj[o];
}
return tObj;
};ajax定义：ZIP_Ajax=Class.create();
其中create方法返回的是一个构造函数request，这里相当于var ZIP_Ajax= function(){ this.request.apply(this, arguments); }; 用对象冒充的方式在函数内部执行了一次构造的过程，相当于把构造函数任务交给了request方法，这里的this.request是ZIP_Ajax的实例的方法，而this指向的就是ZIP_Ajax的实例，apply后面的this指向的是ZIP_Ajax，最后根据new关键字将this才真正指向ZIP_Ajax类。有了类ZIP_Ajax的定义，接下来就可以定义其方法：
XMLHttpRequest详解：
XMLHttpRequest不是一项技术而是一个内置于主流浏览器内的一个可以完全访问http协议的对象。传统的http请求大部分都是基于form提交请求http，然后返回一个form。XMLHttpRequest支持同步请求的同时最大的优点就是支持异步传输接受数据，新建一个ajax请求实际就是实例化一个XMLHttpRequest对象。简单介绍一下主要事件及方法：
readystatechange事件：
当XMLHttpRequest发送一个http请求之后就会激发一个readystatechange事件，事件返回有五个值，0,1,2分别代表创建XMLHttpRequest、初始化完成XMLHttpRequest、发送了请求，3代表响应没结束（即只接收到响应头数据）4才是真正获得完整响应。
返回的status状态表示服务器返回的状态码：
常用的有200表示成功返回数据，301永久重定向，302为临时重定向（不安全）304读取的缓存数据400表示请求出现语法错误，403表示服务器拒绝请求，404表示请求网页资源不存在，405找不到指定位置服务器，408表示请求超时，500服务器内部错误，505表示服务器不支持请求的http协议版本。
200-300表示成功，300-400表示重定向，400-500表示请求内容或者格式或者请求体过大导致错误，500+表示服务器内部错误
open方法：
open接收三个参数分别是请求类型（get,post,head等）、url、同步或者异步
send方法：
当请求就绪后会触发send方法，发送的内容就是请求的数据（如果是get请求则参数为null；
请求成功之后会执行success自定义方法，其参数为返回数据；
ajax跨域：
什么是跨域？
如果两个站点www.a.com想向www.b.com请求数据就出现了因为域名不一致导致的跨域问题。即使是域名相同，如果端口不同的话也是会存在跨域问题（这种原因js是只能袖手旁观了）。判断是否跨域仅仅是通过window.location.protocol+window.location.host来判断例如http://www.baidu.com.
js解决跨域问题几种方案？
1、document.domain+iframe
对于主域相同而子域不同的请求可以使用域名+iframe作为解决办法。具体思想是假如有两个域名下的不同ab文件www.a.com/a.html
以及hi.a.com/b.html,我们可以在两个html文件中加上document.domain="a.com",之后通过在a文件中创建一个iframe去控制iframe的contentDocument，这样两个文件就可以对话了。举例如下：
www.a.com上的a.html文件中
document.domain="a.com";
var selfFrame=document.createElement("iframe");
selfFrame.src="http://hi.a.com/b.html";
selfFrame.style.display="none";
document.body.appendChild(selfFrame);
selfFrame.onload=function(){
var doc=selfFrame.contentDocument||selfFrame.contentWindow.document;//得到操作b.html权限
alert(doc.getElementById("ok_b").innerHTML());//具体操作b文件中元素
}hi.a.com上的b.html文件中
document.domain="a.com";
问题：
1、安全性，当一个站点（hi.a.com）被攻击后，另一个站点（www.a.com）会引起安全漏洞。2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。
2、动态创建script（传说中jsonp方式）
浏览器默认禁止跨域访问，但不禁止在页面中引用其他域名的js文件，并且可以执行引入js文件中的方法等，根据这点我们可以通过创建script节点方法来实现完全跨域的通信。实现步骤为：
a.在请求发起方页面动态加载一个script，script的url指向接收方的后台，该地址返回的javascript方法会被发起方执行，url可以传参并仅支持get提交参数。
b.加载script脚本时候调用跨域的js方法进行回调处理(jsonp)。
举例如下：
发起方
function uploadScript(options){
var head=document.getElementsByTagName("head")[0];
var script=document.createElement("script");
script.type="text/javasctipt";
options.src += '?callback=' + options.callback;
script.src=options.src;
head.insertBefore(script,head.firstChild);
}
function callback(data){}
window.onload=function(){//调用
uploadScript({src:"http://e.com/xxx/main.ashx",callback:callback})
}接收方：
接收方只需要返回一个执行函数，该执行函数就是请求中的callback并赋参数。
3、使用html5的postMessage：
html5新功能有一个就是跨文档消息传输，如今大部分浏览器都已经支持并使用(包括ie8+)，其支持基于web的实时消息传递并且不存在跨域问题。postMessage一般会跟iframe一起使用。
举例如下：
父页面：
<iframe id="myPost" src="http//www.a.com/main.html"></iframe>
window.onload=function(){
document.getElementById("myPost").contentWindow.postMessage("显示我","http://www.a.com")
//第二个参数表示确保数据发送给适合域名的文档
}
a.com/main.html页面：
window.addEventListener("message",function(event){
if(event.origin.indexOf("a.com")>-1){
document.getElementById("textArea").innerHTML=event.data;
}
},false)
<body>
<p>
<span id="textArea"></span>
</p>
</body>这样在父页面加载完成后main.html页面的textArea部分就会显示"显示我"三个字
ajax方法封装code：
ZIP_Ajax.prototype={
request:function(url options){
this.options=options;
if(options.method=="jsonp"){//跨域请求
return this.jsonp();
}
var httpRequest=this.http();
options=Object.extend({method: 'get',
async: true},options||{});
if(options.method=="get"){
url+=(url.indexOf('?')==-1?'?':'&')+options.data;
options.data=null;
}
httpRequest.open(options.method,url,options.async);
if (options.method == 'post') {
httpRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
}
httpRequest.onreadystatechange = this._onStateChange.bind(this, httpRequest, url, options);
httpRequest.send(options.data || null);//get请求情况下data为null
return httpRequest;
},
jsonp:function(){
jsonp_str = 'jsonp_' + new Date().getTime();
eval(jsonp_str + ' = ' + this.options.callback + ';');
this.options.url += '?callback=' + jsonp_str;
for(var i in this.options.data) {
this.options.url += '&' + i + '=' + this.options.data[i];
}
var doc_head = document.getElementsByTagName("head")[0],
doc_js = document.createElement("script"),
doc_js.src = this.options.url;
doc_js.onload = doc_js.onreadystatechange = function(){
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
//清除JS
doc_head.removeChild(doc_js);
}
}
doc_head.appendChild(doc_js);
},
http:function(){//判断是否支持xmlHttp
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
else{
try{
return new ActiveXObject('Msxml2.XMLHTTP')
}
catch(e){
try {
return new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {
return false;
}
}
}
},
_onStateChange:function(http,url,options){
if(http.readyState==4){
http.onreadystatechange=function(){};//重置事件为空
var s=http.status;
if(typeof(s)=='number'&&s>200&&s<300){
if(typeof(options.success)!='function')return;
var format=http;
if(typeof(options.format)=='string'){//判断请求数据格式
switch(options.format){
case 'text':
format=http.responseText;
break;
case 'json':
try{
format=eval('('+http.responseText+')');
}
catch (e) {
if (window.console && console.error) console.error(e);
}
break;
case 'xml':
format=http.responseXML;
break;
}
}
options.success(format);//成功回调
}
else {//请求出问题后处理
if (window.closed) return;
if (typeof (options.failure) == 'function') {
var error = {
status: http.status,
statusText: http.statusText
}
// 判断是否是网络断线或者根本就请求不到服务器
if (http.readyState == 4 && (http.status == 0 || http.status == 12030)) {
// 是
error.status = -1;
}
options.failure(error);
}
}
}
}
};使用方法：
ajax调用举例：
var myAjax=new ZIP_Ajax("http://www.a.com/you.php",{
method:"get",
data:"key=123456&name=yuchao",
format:"json",
success:function(data){
......
}
})
跨域请求调用举例：
var jsonp=new ZIP_Ajax("http://www.a.com/you.php",{
method:"jsonp",
data:{key:"123456",name:"yuchao"},
callback:function(data){
......
}
})上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 自定义ajax支持跨域组件（详细教程）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX
Feb 20, 2024 am 10:07 AM
Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.
Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403
Feb 19, 2024 pm 05:55 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403
Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?
Mar 09, 2024 pm 05:36 PM
Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:
Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?
Feb 23, 2024 pm 04:27 PM
Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
PHP dan Ajax: Membina enjin cadangan autolengkap
Jun 02, 2024 pm 08:39 PM
Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.
PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik
Jun 06, 2024 pm 01:12 PM
Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.
PHP dan Ajax: Cara Meningkatkan Keselamatan Ajax
Jun 01, 2024 am 09:34 AM
Untuk meningkatkan keselamatan Ajax, terdapat beberapa kaedah: Perlindungan CSRF: menjana token dan menghantarnya kepada pelanggan, menambahnya ke bahagian pelayan dalam permintaan untuk pengesahan. Perlindungan XSS: Gunakan htmlspecialchars() untuk menapis input bagi mengelakkan suntikan skrip berniat jahat. Pengepala Kandungan-Keselamatan-Dasar: Hadkan pemuatan sumber berniat jahat dan nyatakan sumber dari mana skrip dan helaian gaya dibenarkan untuk dimuatkan. Sahkan input sisi pelayan: Sahkan input yang diterima daripada permintaan Ajax untuk menghalang penyerang daripada mengeksploitasi kelemahan input. Gunakan perpustakaan Ajax yang selamat: Manfaatkan modul perlindungan CSRF automatik yang disediakan oleh perpustakaan seperti jQuery.
Apakah versi ajax?
Nov 22, 2023 pm 02:00 PM
Ajax bukanlah versi khusus, tetapi teknologi yang menggunakan koleksi teknologi untuk memuatkan dan mengemas kini kandungan halaman web secara tidak segerak. Ajax tidak mempunyai nombor versi tertentu, tetapi terdapat beberapa variasi atau sambungan ajax: 1. jQuery AJAX 2. Axios 4. JSONP 5. XMLHttpRequest 7. Server; -Acara Dihantar; 8, GraphQL, dsb.
