jquery+ajax跨域请求webservice
最近几天在学习webservice。。。在学习的时候便想到用ajax的方式去请求webservice。。
一直在测试。。如果这个被请求的webservice和自己使用的是同一个端口号。则不用考虑那ajax跨域的问题。。
由于ajax没有权限跨域访问。。也就是说。。不是一个端口号没法用。。我是这么理解的。。
现在可以通过一个jsonp来实现ajax跨域的问题。其本质还是通过script标签动态加载js。
首先。我新建一个网站。。再新建一个WebService.asmx文件
该文件写了三个方法
其中这两个方法是供后台调用。。。直接return结果就行了。。
///
/// 无任何参数
///
///
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
/// <summary>
/// 一个参数
/// </summary>
/// <param name="name">参数名</param>
/// <returns></returns>
[WebMethod]
public string Hello(string name)
{
return string.Format("Hello {0}", name);
}
这个方法是返回给ajax的。。大伙应该知道ajax处理数据的格式是json。。所以在这里写的是json格式。。
[WebMethod]
public void GetLoginId(string loginId)
{
//在请求的URL加参数jsoncallback=?,注意这里jsoncallback=?是关键所在！其中?符号会被JQuery自动替换成其它的回调方法名称，
//我们关心的是jsoncallback=?起什么作用了？原来jsoncallback=?被替换后，会把方法名称传给服务器。
//我们在服务器端要做什么工作呢？服务器要接受参数jsoncallback，然后把jsoncallback的值作为JSON数据方法名称返回。
//因此HttpContext.Current.Request["jsoncallback"]中这个参数名称必须是jsoncallback。。
string callback = HttpContext.Current.Request["jsoncallback"];
HttpContext.Current.Response.Write(callback +
"({result:\"true\"})");
//关于result这词是你自己自定义的属性
//会作为回调参数的属性供你调用结果
HttpContext.Current.Response.End();
}
那么。我这个WebService文件的内容就是这样的
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
///WebService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
// [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
///
/// 无任何参数
///
///
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
/// <summary>
/// 一个参数
/// </summary>
/// <param name="name">参数名</param>
/// <returns></returns>
[WebMethod]
public string Hello(string name)
{
return string.Format("Hello {0}", name);
}
[WebMethod]
public void GetLoginId(string loginId)
{
//在请求的URL加参数jsoncallback=?,注意这里jsoncallback=?是关键所在！其中?符号会被JQuery自动替换成其它的回调方法名称，
//我们关心的是jsoncallback=?起什么作用了？原来jsoncallback=?被替换后，会把方法名称传给服务器。
//我们在服务器端要做什么工作呢？服务器要接受参数jsoncallback，然后把jsoncallback的值作为JSON数据方法名称返回。
//因此HttpContext.Current.Request["jsoncallback"]中这个参数名称必须是jsoncallback。。
string callback = HttpContext.Current.Request["jsoncallback"];
HttpContext.Current.Response.Write(callback +
"({result:\"true\"})");
//关于result这词是你自己自定义的属性
//会作为回调参数的属性供你调用结果
HttpContext.Current.Response.End();
}
}
这样之后还没有完。。
因为WebService默认不支持Get请求,所以要在Web.config配置文件内的<system.web>节点内添加以下这段元素:
<system.web>
<webServices>
<protocols>
<add name="HttpGet"/>
<add name="HttpPost"/>
</protocols>
</webServices>
</system.web>
这是加在服务端的web.config中。。
这个webservice运行的效果图
现在就开始请求这个webservice。。
新建一个工程。。引入这个服务
请求这个服务的aspx文件
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebDemo.index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
//Document加载完毕后初始化方法
// $(function Init() {
// $("#TxtLoginId").bind("blur", CkLoginId);
// //CkLoginId();
// });
//帐号验证及提示
function CkLoginId() {
var Id = $("#TxtLoginId").val();
alert(Id);
$.ajax({
url: "http://localhost:61390/WebSite1/WebService.asmx/GetLoginId?jsoncallback=?",
dataType: "jsonp",
data: { "loginId": Id },
success: OnSuccess,
error: OnError
});
}
function OnSuccess(json) {
alert(json.result);
}
function OnError(XMLHttpRequest, textStatus, errorThrown) {
targetDiv = $("#data");
if (errorThrown || textStatus == "error" || textStatus == "parsererror" || textStatus == "notmodified") {
targetDiv.replaceWith("请求数据时发生错误！");
return;
}
if (textStatus == "timeout") {
targetDiv.replaceWith("请求数据超时！");
return;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table border=" width="100%">
<tr>
<td>
<asp:Label ID="LblLoginId" runat="server" Text="帐 号" ClientIDMode="Static"></asp:Label>
<asp:TextBox ID="TxtLoginId" runat="server" ClientIDMode="Static"></asp:TextBox>
<button id="login" onclick="CkLoginId()">登陆</button>
</td>
</tr>
</table>
</form>
</body>
</html>
如果按照我这样写的话。。。貌似只能用ie测试才会弹出true框。。其他浏览器不行。。我也不知道这到底是什么原因。。
但是如果把下面这个方法取消注释。
$(function Init() {
$("#TxtLoginId").bind("blur", CkLoginId);
//CkLoginId();
});
那么不管用什么浏览器测试都可以正常弹出true框。。
下面截图是取消上边那个初始化函数的注释之后的截图。。
后台请求服务的代码
ServiceReference.WebServiceSoapClient tt = new ServiceReference.WebServiceSoapClient();
Response.Write(tt.HelloWorld());
效果图
那么这样就成功了。。。我说的不太详细。。可以参考下面两个网址。。可能说的比较详细清楚。。我也才学。。嘿嘿。。就一个菜鸟。。
学习自：http://www.cnblogs.com/VAllen/archive/2012/07/12/JQueryAjaxRegion.html#3015100
http://www.cnblogs.com/wupeiqi/archive/2013/03/07/2949014.html
jquery+ajax跨域请求webservice的更多相关文章
- jquery ajax跨域请求webservice webconfig配置
<configuration> <system.web> <compilation debug="true" targetFramework=&quo ...
- NodeJ node.js Jquery Ajax 跨域请求
Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...
- jQuery ajax跨域请求的解决方法
在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...
- jquery ajax跨域请求详解
本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...
- jQuery AJAX 跨域请求
跨域请求 只要 dataType : 'jsonp', jsonp:"jsoncallback", 然后返回一个json格式的就可以了 <!doctype html> ...
- jquery Ajax跨域请求
这是jquery api文档对跨域请求的解析:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用JSONP类型.使用这种类型的话,会创建一个查询字符串参数 callbac ...
- jquery.ajax 跨域请求webapi，设置headers
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端 ...
- 关于jquery ajax跨域请求获取response headers问题
背景:最近项目jwt用户认证方式,关于jwt本人就不再赘述,大家可自行百度. jwt token基本流程是这样的: 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一 ...
- jquery ajax跨域请求后台的简单例子
一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...
随机推荐
- usb端口号绑定
由于ubuntu USB设备号为从零开始依次累加,所以多个设备每次开机后设备号不固定,机器人每次开机都要蛋疼的按顺序插, 在网上找到一种方法:udev的规则 udev的规则说明,可以参考博客说明:ht ...
- TRACERT命令
这半个月 服务器从联通线路换到移动线路 导致基层用联通和电信线路的用户 上不去收费软件 tracert 120.194.42.142:8090 发现路由器 解析地址绕过很多条街后 出现丢包现象 联系 ...
- windows8.1下android开发环境搭建(Eclipse+Android sdk+ADT+Genymotion)
一.基本jdk.eclipse环境 二.android sdk 1.下载安装:https://developer.android.com/sdk/installing/index.html?pkg=t ...
- OC基础--构造方法 id类型
new方法实现原理: new做了三件事情 1.开辟存储空间 + alloc 方法 2.初始化所有的属性(成员变量) - init 方法 3.返回对象的地址 [Person new]; == [[Pe ...
- 腾讯云服务器centos 6.5（jdk+tomcat+vsftp）、腾讯mysql数据库 及 tomcat自启动 配置教程
1.腾讯云数据库配置 1.考虑到安全性问题,,平常不使用root用户登录,新增一个用户名neil,用来管理项目的数据库 a.首先登录root创建db_AA数据库 b.在root用户下,创建neil用户 ...
- css初始化
Css初始化代码: *{padding:0px;margin:0px;} body{font-size:12px;font-family: "宋体",Arial Black;tex ...
- CDHtmlDialog的基本使用
转自:http://blog.csdn.net/sky04/article/details/7587406 因为我的部门只有我一个人(无奈之极,只有我一个做C++的,其他的都在做C#),所以我去跟技术 ...
- 启动Tomcat一闪而过——分析及解决过程
启动Tomcat一闪而过--分析及解决过程 嗯,昨天将有关JDK的知识稍微整理了一下,现在稍微整理一下有关Tomcat的! 1:Tomcat是什么? Tomcat是当今世界上使用最为广泛的.开源免费的 ...
- hihoCoder#1094
刚开始学习C语言,准备在做hiho的题目的过程中来学习,在此进行记录,如果代码中有错误或者不当的地方还请指正. 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Littl ...
- Ajax与Comet
1.Ajax核心? XHR >>1.新建XMLHttpRequest >>2.open(),接受3个参数. >>3.send(),接受1个参数. >>4 ...