博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
PhoneGap:JS跨域请求
阅读量:6265 次
发布时间:2019-06-22

本文共 2047 字,大约阅读时间需要 6 分钟。

PhoneGap开发,理论上好处多多。但因为javascript是其中的主角,并且是直接存放于手机,跟服务器数据交互,就会有一个跨域访问的问题。

当然,这个问题肯定有解决方案,不然的话,这种利用PhoneGap等的混合APP模式就没有存在的价值。

网上的方案有很多,比如获取数据,可以采用Jsonp。

但提交数据呢?

首先可以在服务器端做一些配置,允许跨域请求。比如,对于ASP.NET开发的网站,可以修改web.config,加上:

web.config:

然后是客户端JS:

$(function () {	$("#divHello").html("Hello PhoneGap");	forServer();});  var ashx = "http://10.69.25.132/test.ashx";function forServer(){	var xhr;	xhr = new XMLHttpRequest();	if (xhr){		xhr.onerror = function(){alert("错误");};		//xhr.timeout = 60000;//IE9加上这个属性会报错,不知道为什么,其他版本未测试		xhr.ontimeout = function(){alert("超时");};		xhr.onload = function(){			var data = $.parseJSON(xhr.responseText);			$("#divData").html(data.data);		};		xhr.open("post", ashx,true);		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");		xhr.send("p1=guangzhou tianhe");	}	else{		alert("Failed to create");	}}
服务器端test.ashx

public class test1 : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "application/json";            context.Response.Charset = "utf-8";            string res = String.Format(@"{
{""data"":""{0}""}}", context.Request.Form["p1"] ); context.Response.Write(res); } public bool IsReusable { get { return false; } } }

经验总结:

1、$.getJSON()的方式,Chrome下可以,IE死活不行,在IE浏览器下,按F12查看,根本没有连接指定的.ashx,直接拒绝。改用XMLHttpRequest,两种浏览器都能接受。放在安卓手机模拟器里也能正常运行

2、形如 http://localhost:8088/test.ashx 这种方式,在安卓手机模拟器里是连不上的,要改成IP或域名:http://192.168.10.1:8088/test.ashx

3、JS禁止跨域,不是为了保护被访问的服务器,而是为了保护使用浏览器的用户。只要想想木马、弹窗广告、居心叵测的信息收集,就会明白
4、$.getJSON(),IE不支持跨域访问,只能用XMLHttpRequest。有文章说IE8和IE9要使用 
XDomainRequest  ,但其实貌似很是不行(再次鄙视微软,不知道为什么会搞出IE这种怪物,左摇右摆,到处是版本兼容问题,让人抓狂。)
function getData(){	$.getJSON(		ashx		,{"uid" : Date()}		,function(data) {			$("#divData").html(data.data);		});}

转载于:https://www.cnblogs.com/leftfist/p/4257894.html

你可能感兴趣的文章
centos 7 执行 groupinstall报错
查看>>
Web开发入门
查看>>
Flex开发小结(1)如何使用AdvancedDataGrid
查看>>
AFNetworking 下载文件断点续传操作
查看>>
Jar mismatch! Fix your dependencies
查看>>
哀悼日, 网页变灰的实现
查看>>
php:检测用户当前浏览器是否为IE浏览器
查看>>
linux命令备份
查看>>
10个你可能不知道的JavaScript小技巧
查看>>
【ASP】文件上传
查看>>
集合类(数据结构图、集合图、集合之间的比较)
查看>>
hibernate _关联级别策略介绍
查看>>
来了!阿里开源分布式事务解决方案 Fescar
查看>>
挑战Kafka!Redis5.0重量级特性Stream尝鲜
查看>>
荣耀畅玩7C挑战红米5 Plus,千元手机档的王者对决
查看>>
聚划算超级聚享日为当代青年人打造理想家居空间
查看>>
雏形已具?2018年物联网智能市场研究报告
查看>>
陕西破获特大捕杀濒危野生动物案 设置“高压线”电杀猎物
查看>>
“办事不求人”破天荒写入黑龙江省政府工作报告
查看>>
Python文件操作的20个面试题,帮你打开公司大门,值得收藏
查看>>