实现外呼功能的跨域请求-优快云博客

最近项目产品中有个功能需要完成外乎电话功能，公司买了个第三方的软件实现该功能。该软件需要我们给它个http请求传送参数，然后它得请求中的参数实现外呼，至于第三方软件是怎么工作的先就不谈，主要记录下本人在开发过程中的遇到的一些问题和解决方法。

第三方软件工作的原理是监听本地的一个端口，然后得到一个http请求，请求中带了一个电话号码参数以便于外呼电话，该请求为：

http://127.0.0.1:portnum/makecall?phone=*****

该请求的发送可以通过两种方式：1、webservice 2、Ajax

webservice技术本人还没用过所以不谈，在这里是用Ajax的跨域请求实现的

<html>
<title>简单外呼页面</title>
<body>
<input id="call" type="text" size="16" />
<input id="callButton" type="button" value="外呼" 
onClick="call(document.getElementById("callnumber").value)"/>
</body>
</html>

上面call.jsp是实现拨打电话的界面，用户输入电话后，点击“呼叫”调用js，js发送了一个跨域请求，代码如下：

function call(phone){
    if(null==phone||phone=="")return;
    var url = "http://127.0.0.1:18***/makecall?phone="+phone;
    var stat = document.createElement("<img id='stat' src='"+url+"'style='display:none;'/>");
    document.body.insertBefore(stat);
    alert("拨打成功");
}

该JS发出Http求的方法是通过在页面创建一个img对象，然后通过img对象的src属性发出的一个Http请求的。

另一种方法是通过JQuery的Ajax的跨域请求脚本调用，上面的JS方法改成下面方法：

<script type="text/javascript">
//得到callButton按钮
var oBtnTest = $("#callButton");
 oBtnTest.click(function(){
        //得到call文本框输入值
        var phone =  $("#call").attr("value");
        //调用jQuery脚本请求
        jQuery.getScript("http://127.0.0.1:18***/makecall?phone="+phone,function(){alert("拨打成功")});         
    });   
</script>

上面两种方法都能实现Ajax跨域请求的发送。