记得以前学的时候,网上的资料一大堆,就是没几个看的懂,都是理论,包括我目前看的mvc书都是一样,废话一堆,其实东西没那么难,让作者把某个技术吹上天了.
下面是一些初学者,比较实用的代码,欢迎大虾指导....
<ajax调用一般处理程序,并解析json数据>
<因为是测试代码,没有命名>
创建一个静态页面default.html
//下面是default.html的代码,直接考过去就可以了...
<!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>
<title>异步调用一般处理程序</title>
<script type="text/javascript">
//尝试创建XMLHttpRequest对象
function RetuenAjaxXmlHttp() {
var xmlhttp;
try {
//创建不是ie浏览器的对象
xmlhttp = new XMLHttpRequest();
}
catch (e) {
try {
//创建是 ie6 ie7 ie8 浏览器的对象
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("您的浏览器不支持Ajax");
return false;
}
}
}
//返回一个对象
return xmlhttp;
}
//这个是请求的方法
function AnysHandler() {
var xmlHttp = RetuenAjaxXmlHttp();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//返回的json数据,实用eval转换, 大家可以下个断点 解析前的数据格式,和解析后的格式
var list = eval(xmlHttp.responseText);
//循环遍历把值扔给一个div标签
for (var i = 0; i < list.length; i++) {
$("d1").innerHTML += "</br>姓名：" + list[i].Name + " 年龄：" + list[i].Age;
}
}
}
}
这是post请求, xmlHttp.send(null);你可以send键值对过去,通过Request["键"]解析
xmlHttp.open("post", "ReturnJosn.ashx?" + Math.random(), true);
//post请求需要这句话
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
下面在写一个get的方式吧
其实好简单 一看就会
// xmlHttp.open("get", "ReturnJosn.ashx?" + Math.random(), true);
//xmlHttp.send(null);
哈哈,少写一句话就可以了
Math.random(), 这句话,主要的作用就是,自己想吧,试试,不加会怎么样
}
//就是一个方法 不是jquery啊
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<a href="#" οnclick="AnysHandler()">ajax异步调用Handler的返回数据</a><br />
<div id="d1" style="border: solid 1px #ff0000">
</div>
</body>
</html>
好了,第一步完成了,创建一个 一般处理程序 ReturnJosn.ashx
这个没什么说得,直接考过去,就可以用了,改下命名空间就行了,....
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI.MobileControls;
using System.Web.Script.Serialization;
using System.Web.SessionState;
namespace Ajax简单运用
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class ReturnJosn : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
List<Person> persons = new List<Person>();
persons.Add(new Person() { Name = "陈猛", Age = 21 });
persons.Add(new Person() { Name = "陈猛", Age = 21 });
persons.Add(new Person() { Name = "陈猛", Age = 21 });
//返回json序列
JavaScriptSerializer jsSer = new JavaScriptSerializer();
context.Response.Write(jsSer.Serialize(persons));
}
public bool IsReusable
{
get
{
return true;
}
}
}
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
}
相信大家学到这里,做一个 异步的刷新时间,异步的注册验证,异步登陆,都可以了吧
下面在写一个调用webService 调用aspx页面 就不写了,其实都一样
<ajax调用webService >
创建default.html吧
<有几个调用方式,大家看看吧,主要麻烦在解析上面,webService返回的是xml数据>
<!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>
<title>异步调用Service</title>
<script type="text/javascript">
function returnxmlhttp() {
var xmlhttp;
try {
xmlhttp = new XMLHttpRequest();
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("您的浏览器不支持Ajax");
return false;
}
}
}
return xmlhttp;
}
//这个方法是,webService直接返回,一个字符串,不需要解析
function showService() {
var xmlHttp = returnxmlhttp();
//调用webService就是路径不一样
//路径 最好这样学, 把webService在浏览器查看,调用你想调用的方法,然后就把路径考过来使用,
var url = "http://localhost:1472/ajax%E8%B0%83%E7%94%A8webService/WebService1.asmx/HelloWorld";
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var tmp = xmlHttp.responseText;
$("d1").innerHTML = tmp;
}
}
}
xmlHttp.open("Post", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}
//这个是传过去一个参数,然后我没处理直接返回来,就是演示 传参....
function showName() {
var xmlHttp = returnxmlhttp();
var poststr = "name=" + $("text1").value;
var url = "http://localhost:1472/ajax%E8%B0%83%E7%94%A8webService/WebService1.asmx/ShowName";
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var tmp = xmlHttp.responseText;
$("d1").innerHTML = tmp;
}
}
}
xmlHttp.open("Post", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(poststr);
}
//这个方法是返回一个json数据,经过处理,就变成了xml文件,太恶心了....,我发现,用我自己写的(字符串)方法解析,还是比较容易理解,
function jsonList() {
var xmlHttp = returnxmlhttp();
var url = "http://localhost:1472/ajax%E8%B0%83%E7%94%A8webService/WebService1.asmx/ShowJson";
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//还有一种解析方式 用XMLDOM
//这是字符串解析方式,比较容易理解,下面还有就是用xmlDOM解析,在后面我会,把处理后的xml文件直接拿出来,用xmldom解析,
var tmp = xmlHttp.responseText;
var startIndex = tmp.indexOf("[");
var endIndex = tmp.indexOf("]");
var list_info = tmp.substring(startIndex, endIndex + 1);
var list = eval(list_info);
for (var i = 0; i < list.length; i++) {
$("d1").innerHTML += "</br>姓名：" + list[i].Name + " 年龄：" + list[i].Age;
}
}
}
}
xmlHttp.open("Post", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(null);
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div>
<input type="button" id="btn_show" name="btn_show" value="ajax调用webService" οnclick="showService()" /><br />
<input type="text" id="text1" name="text1" /><br />
<input type="button" id="btn_name" name="btn_name" value="ajax有参调用webService" οnclick="showName()" /><br />
<input type="button" id="json_list" name="json_list" value="返回的json数据" οnclick="jsonList()" /><br />
</div>
<div id="d1">
</div>
</body>
</html>
<下面写出webService文件,就差不多了>
哈哈,后面我还准备讲一下简单的回调,和一个比较常用的借口
创建一个WebService1.asmx文件
<代码直接扔出来>
不会同学,看看就好了......会的过去,下面还有 xmldom解析webService处理的xml文件,简单回调,常用的一个接口
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
namespace Ajax简单运用.ajax调用webService
{
/// <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 string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public string ShowName(string name)
{
return name;
}
[WebMethod]
public string ShowJson()
{
List<Stu> list_stu = new List<Stu>();
list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
JavaScriptSerializer js = new JavaScriptSerializer();
return js.Serialize(list_stu);
}
}
public class Stu
{
public string Name { get; set; }
public int Age { get; set; }
}
}
<下面是xmldom解析webService处理后的xml文件>
创建一个xml文件 XMLInfo.xml
假如这是一个webService处理后的xml文件,不信你可以看上面的webService返回的xml文件
<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">
[{"Name":"陈猛","Age":21},{"Name":"陈猛","Age":21},{"Name":"陈猛","Age":21},{"Name":"陈猛","Age":21}]
</string>
在创建一个html页面吧,我直接写出代码,大家比较一下
<注意><注意>
这个解析仅限于解析webService处理后的xml文件<很多局限性>(比如,这个webService返回的还必须是json数据,处理的后的格式才是这样,)(不是很绝对,因为我喜欢这样解析,这样返回, 真没试过别的返回格式....
<后面还有一个,简单的回调和一个接口了>,5分钟搞定.....
<!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>
<title></title>
<script type="text/javascript">
function returnxmldomObj() {
var xmldoc;
try {
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {
xmldoc = document.implementation.createDocument("", "", null);
}
catch (e) {
alert(e.message);
}
}
xmldoc.async = false;
xmldoc.load("XMLInfo.xml");
return xmldoc;
}
function showXML() {
var xmldom = returnxmldomObj();
var tmp = xmldom.text;
var tmp1 = eval(tmp);
for (var i = 0; i < tmp1.length; i++) {
document.getElementById("d1").innerHTML += "姓名:" + tmp1[i].Name + " 年龄:" + tmp1[i].Age + "</br>";
}
}
</script>
</head>
<body>
<input type="button" id="btn_show" name="btn_show" value="显示XML文件" οnclick="showXML()" />
<div id="d1">
</div>
</body>
</html>
<一个简单的回调,希望同学们明白,回调的处理机制....>
创建一个webForm1.aspx页面
我把代码写上
<就写一个控件,什么都没有>,下面是后台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Ajax简单运用.WebForm1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#" id="a1" runat="server">回调</a>
</div>
</form>
</body>
</html>
<后台代码,OK了,>
下面就一个接口了,还不用实现,O(∩_∩)O哈哈~
代码就不讲了,大家看看你,多看看,在看几眼,你就知道回调的处理机制了,
就是这句话, this.a1.Attributes.Add("onclick",this.GetPostBackClientEvent(this,"aaaa"));
然后就是在实现一个接口
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Ajax简单运用
{
public partial class WebForm1 : System.Web.UI.Page,IPostBackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
this.a1.Attributes.Add("onclick",this.GetPostBackClientEvent(this,"aaaa"));
}
#region IPostBackEventHandler 成员
public void RaisePostBackEvent(string eventArgument)
{
string jsStr = "alert('" + eventArgument + "')";
ClientScript.RegisterStartupScript(this.GetType(), "cm", jsStr, true);
}
#endregion
}
}
<说了,讲这个接口,就一定讲,>
//在这样的情况下 你需要这个接口,比如 比如 你在一般处理程序需要找到某个Session的值 你就需要
直接写出代码
对了,就是这个接口,无需实现,,,,IReadOnlySessionState
这个是只读,还有一个是读写,自己找找...
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.SessionState;
namespace Ajax简单运用
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler1 : IHttpHandler,IReadOnlySessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
扫一扫
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
