明辉站/电脑学习/内容

怎么灵活使用Web的AJAX_JQuery调用Web service完成AJAX完成图文详细教程详细说明

电脑学习2023-07-23 阅读
[摘要]怎样使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解随着软件运行环境越来越复杂,webse州ce为分布式应用、跨平台交互、软件间的整合提供了一种解决方案。思路就是用ajax定时查看有无新内容,如果有的用一个定时器让文字闪动(通过变化文件的color实现),如果没...

怎样使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

随着软件运行环境越来越复杂,webse州ce为分布式应用、跨平台交互、软件间的整合提供了一种解决方案。思路就是用ajax定时查看有无新内容,如果有的用一个定时器让文字闪动(通过变化文件的color实现),如果没有就关闭定时器,恢复文字的颜色。里邮件的获取用到了exchange的web service 结合jquery和一般处理程序ashx的ajax。

前几天跟一个朋友在聊Web的AJAX时,很惊讶他的设计方法很原始,直接用的js直接调的.aspx,传参来取得结果实现局部刷新,个人感觉这样不好维护,也没有灵活性.

怎样能够做到灵活?可维护性强?

做一个小实例出来,也加强一下印象.

jQuery+Web service来实现:Web service作后台服务,用jQuery(js优秀框架)调此web service取得结果,如下是原理图:

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

现在开始演示一个实例,开发工具如下为:Visual studio S 2008+jQuery1.4.1

1.新建一项目:MyService

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

2.Web service后台代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace MyService
{
///


/// Summary description for Service1
///

[WebService]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]//此处需要设定为ScriptService类型,js才能够从web service取得值
public class Service1 : System.Web.Services.WebService
{

[WebMethod]
public string GetMessage(string name)
{
return "Hello,"+name;
}

[WebMethod]
public List GetMembers() {
List personList = new List();
personList.Add("AGAN");
personList.Add("MS");
personList.Add("ZURI");
personList.Add("JILI");
personList.Add("Who are you!");
return personList;
}

[WebMethod]
public string GetYourAge(string name) {
int age = 0;
switch(name.ToUpper()){
case "AGAN":
age = 18;
break;
case "MS":
age = 28;
break;
case "ZURI":
age = 25;
break;
case "JILI":
age = 23;
break;
default:
age = 30;
break;
}
return age.ToString();
}
}
}

 

注意在web.config中配置好默认文档Service1.asmx,否则IIS中测试会报错403的错误.






 

3.在项目解决方案中添加一Web setup项目MyServiceSetup,如下图:

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

右键点击MyServiceSetup安装包,有Install(安装),unInstall(卸载)点击即可发布到IIS中或中IIS移除.

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

浏览已发布的这个Web service可以看到已公开的这方个方法,如图所示:

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

现在我们来测试一下GetMambers()这个方法,如图:

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

点"调用"后结果如下:

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

这说明发布的这个Web service已没有问题,现在我们用jQuery来调这个服务来实现AJAX局部刷新的效果。

[page]
 

现在下载jQuery插件jquery-1.4.1.js

下载地址:http://www.6down.net/soft/html/13684.html

4. 建一个测试的项目来测试web service:TestMyService:

怎样灵活使用Web的AJAX_JQuery调用Web service实现AJAX实现教程详解

用js调用web service,一个按钮取得ArrayOfString中的列表数据,点击列表项调GetYourAge()方法取得某个人的相关信息(年龄),添加一html文件,把jquery-1.4.2.js把到js,

代码和jquery代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestMyService._Default" %>












<script src="js/jquery-1.4.1.js" type="text/javascript"></script>


<script type="text/javascript">

function GetDataList()
{
$.ajax({
type:"POST",
contentType:"application/json",
url:"http://localhost/MyServiceSetup/Service1.asmx/GetMembers",//GetMembers是web service的方法名
data:"",//无参数类型
datatype:'json',
success:function(result){
try{
$('#listMembers').empty();
$(result.d).each(function() {//遍历取得的结果
$("#listMembers").append("

学习教程快速掌握从入门到精通的电脑知识

……

相关阅读