最近项目产品中有个功能需要完成外乎电话功能,公司买了个第三方的软件实现该功能。该软件需要我们给它个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跨域请求的发送。
分享到:
相关推荐
本文将深入探讨如何解决Ajax跨域请求的问题。 首先,理解“同源策略”是解决问题的关键。同源策略是浏览器为了保障网络安全而设定的一种机制,它禁止了一个源的文档或脚本访问另一个源的属性,这里的“源”指的是...
### AJAX跨域请求详解 #### 一、引言 在Web开发中,由于浏览器的同源策略限制,AJAX请求通常只能向同源服务器发送请求。然而,在实际应用中,跨域请求的需求非常常见。本篇文章将通过一个具体的示例(JSP页面+后台...
基于ajax方式的跨域请求jsonp的前后台代码
【Ajax跨域请求WebService.asmx】是一个常见的Web开发技术应用场景,主要涉及到JavaScript的Ajax技术、C#编程语言以及ASP.NET的WebService组件。Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的...
这个"ajax跨域请求demo.zip"压缩包提供了一个关于如何实现Ajax跨域请求的示例,涉及到前后端的交互。 首先,我们关注"前端代码"部分。前端通常使用JavaScript库如jQuery来实现Ajax请求。jQuery的`$.ajax()`方法是...
总的来说,JSONP是Ajax跨域请求的一种实用解决方案,尤其适用于只支持GET请求且不涉及复杂交互的场景。但是,它也有一些局限性,比如不支持POST请求、无法控制HTTP头部、无错误处理机制等。因此,在现代Web开发中,...
本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...
**Ajax跨域请求问题与jQuery JSONP解析** 在Web开发中,Ajax技术被广泛用于实现页面的异步更新,但浏览器的同源策略(Same-Origin Policy)限制了Ajax请求只能向同源(协议、域名、端口均相同)的服务器发送。这在...
jQuery,作为一个强大的JavaScript库,提供了便捷的方式来处理这种问题,特别是通过其Ajax功能进行跨域请求。本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域...
【标题】"Ajax跨域请求调用WebService接口"是一个关键的技术点,主要涉及到Web开发中的异步数据交互和跨域安全策略。在Web应用程序中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况...
标题“用代理避免ajax跨域请求(手机验证码)”指出了解决这个问题的一种策略,即利用代理服务器来规避浏览器的同源策略限制。下面我们将深入探讨这个主题。 首先,我们了解什么是跨域请求。在Web开发中,由于...
在HTMLTest文件中,可能包含了一个简单的AJAX跨域请求的示例代码。常见的使用jQuery或者原生JavaScript发起AJAX请求的方式如下: jQuery示例: ```javascript $.ajax({ url: 'http://otherdomain.com/api', type:...
4. AJAX跨域: AJAX本身不支持跨域,但是通过CORS(Cross-Origin Resource Sharing,跨源资源共享)机制,可以实现AJAX的跨域请求。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段,允许指定的源进行...
在这里,我们将探讨如何利用jQuery Mobile和Ajax实现跨域请求。 首先,理解什么是跨域请求。由于浏览器的安全策略,JavaScript通常被限制在同源策略之下,即只能访问与当前页面相同协议、域名和端口的资源。但有时...
6. **Domain属性(仅限子域)**:在cookies中设置`domain`属性可以实现跨子域共享,但这仅限于同一主域下的子域名之间,对AJAX跨域请求帮助有限。 在实际应用中,开发者通常根据项目需求和服务器环境选择合适的跨域...
客户端JavaScript代码中,使用jQuery的`$.ajax`进行跨域请求时,可以在`beforeSend`回调函数中设置请求的headers: ```javascript $("#btnSubmit").click(function () { var ticket = $.cookie("token"); var ...
AJAX跨域请求是指当一个网页从一个域名下的服务器请求另外一个域名下的资源时,由于浏览器的同源策略,可能会被拒绝访问,产生跨域问题。同源策略是浏览器的一个安全机制,它要求网页的脚本只能访问和操作与该脚本...
主要介绍了基于iframe实现ajax跨域请求,并获取网页中ajax数据,如何利用网页ajax请求暴露出来的接口去抓取网页数据?需要的朋友可以参考下
JSONP是一种常用的跨域数据获取方式,其原理是利用`<script>`标签没有跨域限制的特点来实现跨域请求。请求时,在URL中添加一个回调函数名作为参数,服务器收到请求后返回一个函数调用,其中包含所需的数据。 **案例...