jquery+ajax跨域请求webservice

时间：2022-09-12 14:47:34

最近几天在学习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运行的效果图

jquery+ajax跨域请求webservice

现在就开始请求这个webservice。。

新建一个工程。。引入这个服务

jquery+ajax跨域请求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="帐&nbsp;&nbsp;号" 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框。。

下面截图是取消上边那个初始化函数的注释之后的截图。。

jquery+ajax跨域请求webservice

后台请求服务的代码

ServiceReference.WebServiceSoapClient tt = new ServiceReference.WebServiceSoapClient();
            Response.Write(tt.HelloWorld());

效果图

jquery+ajax跨域请求webservice

那么这样就成功了。。。我说的不太详细。。可以参考下面两个网址。。可能说的比较详细清楚。。我也才学。。嘿嘿。。就一个菜鸟。。

学习自：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的更多相关文章

  1. jquery ajax跨域请求webservice webconfig配置

    <configuration> <system.web> <compilation debug="true" targetFramework=&quo ...

  2. NodeJ node&period;js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  3. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  4. jquery ajax跨域请求详解

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

  5. jQuery AJAX 跨域请求

    跨域请求 只要 dataType : 'jsonp',  jsonp:"jsoncallback",  然后返回一个json格式的就可以了 <!doctype html&gt ...

  6. jquery Ajax跨域请求

    这是jquery api文档对跨域请求的解析:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用JSONP类型.使用这种类型的话,会创建一个查询字符串参数 callbac ...

  7. jquery&period;ajax 跨域请求webapi，设置headers

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端 ...

  8. 关于jquery ajax跨域请求获取response headers问题

    背景:最近项目jwt用户认证方式,关于jwt本人就不再赘述,大家可自行百度. jwt token基本流程是这样的: 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一 ...

  9. jquery ajax跨域请求后台的简单例子

    一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...

随机推荐

  1. 用NotePad如何实现大小写转换

    1.小写转换大写  Ctrl + shift + U 2.大写转换小写  Ctrl + U

  2. C&num;工具介绍

    VisualStudio是微软的官方提供的.NET开发工具. 除了VisualStudio外,还有一些开源的.NET开发IDE. MonoDevelop.SharpDevelop等. 开发未必需要使用 ...

  3. &period;NET下的延迟加载

    在应用中有很多实例可能需要延迟创建对象, 比如设计模式中的单例模式就是一种非常常见的情况.如果不考虑线程安全我们通常会编写如下代码: public class SingleInstance { pri ...

  4. linux系统配置文件和用户配置文件及其作用

    我的博客:www.while0.com /etc/issue 未登陆时控制台显示的文字 /etc/issue.net 远程登陆时控制台显示的文字 /etc/motd 用户登陆时显示的文字 这里先提供两 ...

  5. poj 3436 &lpar;最大流&rpar;

    题意:每台电脑共有p种零件,现在有n台机器,给出n台机器每台需要的一些种类零件当原料(0代表不需要,1代表必须要,2代表可有可无)和输出的产品零件.问怎么安排生产线使生产出来零件可以组装的电脑最多. ...

  6. 总结文件操作函数-文件夹（三）-C语言

    获取.改变当前文件夹: 原型为: #include <unistd.h>   //头文件 char *getcwd(char *buf, size_t size); //获取当前文件夹.相 ...

  7. 荐 android 如何打包自定义控件（转）

    荐 android 如何打包自定义控件(转)   目录[-] 方式一:将项目打包成jar包 方式二:项目作为一个library 设计自定义的控件对android开发人员来说,是家常便饭了,但是多次做项 ...

  8. js的数组的一些操作

    1 arr.reduce let xxx = arr.reduce( function (pv, cv, ci ,arr) { return }[, init_val] ) 对arr的每个元素,执行匿 ...

  9. CSS学习笔记&lowbar;day3

    一.浮动的清除 1.给祖先元素加高度 <style> * { padding: 0; margin: 0; } .box1 { height: 100px; /**/ } ul { /*去 ...

  10. 《Dare To Dream》第七次作业：团队项目设计完善&amp&semi;编码测试

    任务一:团队项目<软件设计方案说明书>Github链接:https://github.com/Sophur/Team-Project 任务二:项目集成开发环境: (1)JSP技术 JSP( ...

相关文章