前台页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
jQuery(function () {
jQuery.ajax({
url: "http://localhost:1203/Handler1.ashx?callback=?",
//jsonpCallback:callback,
dataType: "jsonp",
data: { name: "likong" },
success: function (result) {
window.alert("姓名:" + result.name + ", 性别:" + result.gender); } }) function callback(){
window.alert("回调成功!"); } })
</script>
</head>
<body>
</body>
</html>

ashx文件代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace WebApplication1
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
string callback = context.Request.QueryString["callback"];
var name = context.Request.QueryString["name"];
string json = "{\"name\":\"" + name + "\",\"gender\":\"" + "男" + "\"}";
//JSONP格式:回调函数名(json格式参数)
//括号后不要加分号
string result = callback + "(" + json + ")";
context.Response.ContentType = "application/json";
context.Response.Write(result); } public bool IsReusable
{
get
{
return false;
}
}
}
}

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
jQuery(function () {
jQuery.ajax({
url: "http://localhost:1203/WebService1.asmx/GetGenderByName?callback=?",
//jsonpCallback:callback,
dataType: "jsonp",
data: { name: "李空" },
success: function (result) {
window.alert("姓名:" + ":" + result.name + ", 性别:" + result.gender);
} }); function callback(){
window.alert("回调成功!"); } })
</script>
</head>
</html>

或者:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
jQuery(function () {
jQuery.getJSON("http://localhost:1203/WebService1.asmx/GetGenderByName?callback=?&name=李空", function (result) {
window.alert("姓名:" + ":" + result.name + ", 性别:" + result.gender);
}, callback()) function callback(){
window.alert("回调成功!"); } })
</script>
</head>
</html>

Webservice代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Data; namespace WebApplication1
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{ [WebMethod]
public void GetGenderByName(string callback, string name)
{
string json = "{\"name\":\"" + name + "\",\"gender\":\"" + "男" + "\"}";
string result = callback + "(" + json + ")";
HttpContext.Current.Response.ContentType = "application/json";
HttpContext.Current.Response.Write(result);
HttpContext.Current.Response.End();
}
}
}

注释:测试Webservice是否调用成功,必须先运行Webservice页面!

Ajax跨域请求ashx文件与Webservice文件的更多相关文章

  1. 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例

    部署环境:Window 7 SP1+IIS7 成功方案: 其成功解决问题的几个重要因素如下: 1.       由于WebService默认不支持Get请求,所以要在Web.config配置文件内的& ...

  2. 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  3. WebService跨域配置、Ajax跨域请求、附开发过程源码

    项目开发过程中需要和其他公司的数据对接,当时我们公司提供的是WebService,本地测试,都是好的,Ajax跨域请求,就报错,配置WebService过程中,花了不少功夫,入不少坑,不过最终问题还是 ...

  4. 第113天:Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  5. 浅谈linux 下,利用Nginx服务器代理实现ajax跨域请求。

    ajax跨域请求对于前端开发者几乎在任何一个项目中都会用到,众所周知,跨域请求有三种方式: jsonp; XHR2 代理: jsonp: 这种应该是开发中是使用的最多的,最常见的跨域请求方法,其实aj ...

  6. 解决ajax跨域请求 (总结)

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  7. JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuer ...

  8. php中ajax跨域请求---小记

    php中ajax跨域请求---小记   前端时间,遇到的一个问题,情况大约是这样: 原来的写法: 前端js文件中: $.ajax({ type:'get', url:'http://wan.xxx.c ...

  9. jquery ajax跨域请求详解

    本文章来给大家详细jquery中的ajax跨域请求, 在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的jquery.ajax jsonp格式和jque ...

随机推荐

  1. java基础回顾(八)——Queue

    今天回顾了下关于Queue的一些相关知识 我们可以看到,Deque也是一个接口,它继承了Queue的接口规范.其中LinkedList和ArrayDeque都是实现Deque接口,所以,可以说他们俩都 ...

  2. namke 命令行编译

    简介 大家已经习惯于微软提供的功能强大的IDE,已经很少考虑手动编连项目了,所谓技多不压身,有空的时候还是随我一块了解一下命令行编译. C/C++/VC++程序员或有Unix/Linux编程经验应该很 ...

  3. swift 常见报错及解决方案

    当你初学swift,或者你从2.0转到3.0,见点红是在所难免再寻常不过的事情,其实一般也都是一些小的语法问题,度娘一般都有能力告诉你答案,但是凡事做个总结做到心中有数毕竟是比度娘靠谱的. 1.can ...

  4. PHP时间日期

    PHP常用的几个时间日期函数有:date(),mktime(),strtotime(); 一.string date ( string $format [, int $timestamp ] ) 函数 ...

  5. C#DataGridView中的常用技巧

    0(最基本的技巧). 获取某列中的某行(某单元格)中的内容  this.currentposition = this.dataGridView1.BindingContext  [this.dataG ...

  6. pt-query-digest查询日志分析工具

    1.工具介绍 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcp ...

  7. centos6.x下手工安装二进制Docker v1.1x

    Docker在 centos 6.x 下面默认最新的版本是1.7, 然而这个并不符合我的实际需求, 尤其我需要 docker-compose 来作为编配工具部署swarm, 所以只有使用二进制的安装包 ...

  8. 关于mysql 的一些零碎.

    /* 又在做自己以前做的事.总是拿以前的眼光来看现在,导致了其实自己已经很low,但是还觉得自己很xxx. 好吧,最近开始PHP审计.jishigou!!!!!! */ 查看日志情况. show va ...

  9. android前端开发 布局学习

    元素背景设置 -------------------------------- Android中shape中的属性大全 http://www.oschina.net/question/166763_3 ...

  10. AngularJS 中设置 AJAX get 请求不缓存的方法

    var app = angular.module('manager', ['ngRoute']); app.config(['$routeProvider', function($routeProvi ...