网站地图    收藏   

主页 > 前端 > javascript >

ajax 跨域提交数据实例详解

来源:自学PHP网    时间:2014-09-19 14:48 作者: 阅读:

[导读] 现在实现ajax方法有原生的javascript与现在jquery $.ajax方法,下面我们分别来介绍利用它们实例跨域提交数据,希望此方法对各位有帮助。...

出于安全性的考虑,在AJAX应用中,浏览器通常都会限制跨域提交数据,但这又恰恰是非常常用的需求。比如在a.com的页面上中提交一些请求数据到b.com的服务器上,b.com服务器处理请求完毕后返回响应内容到a.com的页面上。如何解决呢,使用js是比较简单易实现的方案,缺点是代码跟应用相关,无法抽象出模板机制进行重用。

具体的原理和实现是这样的,在a.com的页面上,假设叫a.html, 提交数据的javascript事件中动态添加一个类型为javascript的节点,这个节点指向接收数据的b.com的动态页面,以php为例,假设叫b.php页面。
但是在浏览器(包括IE系和Mozilla系以及Opera等)看来就像是包含一个真正的js脚本一样,因此它会去请求这个
b.php,在b.php中处理相应逻辑之后,返回一小段打印结果的javascript代码即可。返回到a.html后浏览器负责解析这一小段javascript代码,打印或显示出请求结果。正是通过这种‘欺骗’浏览器的方式,实现了数据跨域的功能。

ajax的原理

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起,来看看它的工作原理。
首先,我们先来看看XMLHttpRequest这个对象的属性。
它的属性有:
onreadystatechange  每次状态改变所触发事件的事件处理程序。
responseText     从服务器进程返回数据的字符串形式。
responseXML   从服务器进程返回的DOM兼容的文档数据对象。
status                 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text         伴随状态码的字符串信息
readyState         对象状态值,0—未初始化 1—正在加载  2—加载完毕 3—交互 4—完成。

但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。
下面是面对不同浏览器分别创建的XMLHttpRequest对象。

 代码如下 复制代码
var xmlHttp = false;
//创建面向IE的XMLHttpRequest对象
try {
    //使用Msxml的一个版本来创建
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    try {
        //使用它的另外一个对象来创建
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
 
    }
}
 
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    //创建面向其它非微软浏览器的XMLHttpRequest对象
    xmlHttp = new XMLHttpRequest();
}

这个过程分为三步,首先我们定义一个xmlHttp来引用创建的XMLHttpRequest。
然后,我们尝试在微软的浏览器中创建该对象,先用 Msxml.XMLHTTP对象来创建,
如果失败再尝试用macrosoft.XMLHTTP来创建它.最后,我们面向非微软浏览器来创建该对象.
这样,我们创建了一个XMLHttpRequest对象, 下面我们来看如何发出一个XMLHttpRequest请求。

 代码如下 复制代码
function executeXMLHttpRequest(callback,url)
{
    //处理非微软浏览器的情况
    if(window.XMLHttpRequest)
    {
        xhr=new XMLHttpRequest();
        xhr.onreadystatechange = callback;
        xhr.open("Get",url,true);
        xhr.send(null);
    }
    //处理微软浏览器的情况
    else if(window.ActiveXObject)
    {
        xhr=new ActiveXObject("macrosoft.XMLHttp");
        if(xhr)
        {
            xhr.onreadystatechage=callback;
            xhr.open("Get",url,true);
            xhr.send();
        }
    }
}


由上面可见,执行XMLHttpRequest实际上大多数代码还是用在处理浏览器的区别上面,
针对不同的浏览器它还是要做出不同的处理,但是这样看上去也非常的直观。
在上面的代码中,最关键的是: xhr.onreadystatechage=callback
它定义了回调函数,一旦响应它就会自动执行。
xhr.open(""Get",url,true);   true表示您想要异步执行该请求。
对于callback来说,我们有:

 代码如下 复制代码
function processAjaxResponse() {
    //状态标识为已完成
    if (xhr.readyState == 4) {
        //已就绪
        if (xhr.status == 200) {
            document.getElementById('votes').innerHTML = xhr.responseText;
        } else {
            alert("There was a problem retrieving the XML data: " +xhr.statusText);
        }
    }
}

就是说,一旦服务器处理完XMLHttpRequest并返回给浏览器,
用xhr.onreadystatechange指派的回调方法将自动调用。
上面差不多就是XMLHttpRequest的整个工作流程,
它首先检查XMLHttpRequest的整体状态并且保证它已经完成 (readyStatus=4),
然后根据服务器的设定询问请求状态,
如果一切已经就绪(status=200),那么就执行下面需要的操作。
过程步骤不复杂 就三个步骤:
1.创建一个XMLHttpRequest对象
2.发送一个XMLHttpRequest请求
3.将请求后服务器返回的结果数据输出到html
下面重点看看要实现ajax跨域提交数据,应该如何做!
直接用jquery的$.ajax 方法吧

 代码如下 复制代码
$(document).ready(function(){
    $("input[name=username]").blur(function(){
        $.ajax({
            type: "GET",  //必须是get方式!!!
            url: "http://xxx.com/test.php",
            dataType:"jsonp",  //必须指定是jsonp
            jsonp:"json_callback", //必须指定服务器端要接收的callback函数名! 请看test.php如何接收
            data: {username:$('#username').val()},
            success: function(json){
            if(json.msg=='err')
                alert(json.info);
            else if(json.msg=='ok')
                alert('提交成功');
            else
                alert('提交失败');
            },
            error:function(){
                alert("error!!!");
            },
 
            });
 
        });
 
    });


test.php

 代码如下 复制代码


//接收js传过来的callback函数名,
//为了在下面echo组装....$username = $_GET['username'];
$jsonp_callback = $_GET['json_callback'];
echo $jsonp_callback,'({"msg":"err","info":"'.$username.'"})'; exit;

到这里,跨域获取数据,提交数据正式完毕!

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论