[Ajax]ajax入门

最新推荐文章于 2023-05-16 23:31:23 发布
最新推荐文章于 2023-05-16 23:31:23 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： ASP.NET ASP.NET入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dingxiaowei2013/article/details/17130553
版权

谈到ajax异步刷新技术，我之前感觉很高深，今天看了一下，大体上有一个了解，AJAX最大的应用就是我们要理解XMLHttpRequest这个对象。XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请数 据， 在  页面加载后在服务器端接受数据，在后台向客户端发送数据。

关于ajax的详细叙述，可以参考这个博客：http://www.blogjava.net/tbwshc/archive/2012/07/24/383857.html

然后我贴出一些原始的ajax的例子，这样更方便了解ajax原理，解开他神奇的面纱，当然现在使用jQuery的ajax封装方法也非常方便。

例1：get请求

get.ashx:

<%@ WebHandler Language="C#" Class="_01_get" %>

using System;
using System.Web;

public class _01_get : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        //int m = 0;
        //int n = 5 / m;
        
        //System.Threading.Thread.Sleep(3000);
        context.Response.Write(DateTime.Now.ToString());
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

get.htm: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //注意问题
        //1 请求的路径中不要有中文
        //2 注意大小写
        //3 设置不读缓存
        //4 区分readyState XMLHttpRequest的状态  和status http的状态码
        
        //1 创建对象
        var xhr = createXHR();
        function createXHR() {
            var request;
            if (XMLHttpRequest) {
                request = new XMLHttpRequest();
            
            } else {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return request;
        }
        function btn_click() {
            
            document.getElementById("d").innerHTML = "正在加载...";           
            //2 初始化     
            xhr.open("get", "01-get.ashx?_="+ Math.random(), true);
            //设置请求头 不读缓存
            //xhr.setRequestHeader("If-Modified-Since", "0");
       
            //3 注册事件
            xhr.onreadystatechange = function () {
                //判断接收服务器的响应完成后
                if (xhr.readyState == 4) {
                    //判断服务器返回的状态码 
                    if (xhr.status == 200) {
                        //获取服务器返回的响应
                        //xhr.responseText
                        //xhr.responseXML
                        document.getElementById("d").innerHTML = xhr.responseText;
                    } else {
                        document.getElementById("d").innerHTML = "服务器内部错误";
                    }
                }
            }
            //4 发送请求
            xhr.send();
        }
        
    </script>
</head>
<body>
    <input type="button" value="get" οnclick="btn_click()" />

    <div id="d"></div>
</body>
</html>

例2：post请求提交保单

post.ashx:

<%@ WebHandler Language="C#" Class="_02_post" %>

using System;
using System.Web;

public class _02_post : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";

        string name = context.Request.Form["n"];
        string pwd = context.Request.Form["p"];
        if (name == "admin" && pwd == "admin")
        {
            context.Response.Write(1);
        }
        else
        {
            context.Response.Write(0);
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}


post.htm:

<!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">
        //1 创建对象
        var xhr = createXHR();
        function createXHR() {
            var request;
            if (XMLHttpRequest) {
                request = new XMLHttpRequest();
            } else {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return request;
        }
        function btn_click() {
            var name = my$("txtName").value;
            var pwd = my$("txtPwd").value;
            var data = "n=" + name + "&p=" + pwd;
            
            //2
            xhr.open("post", "02-post.ashx", true);
            //!------------------!注意
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //3
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var m = xhr.responseText;
                        if (m == 1) {
                            my$("msg").innerHTML = "登录成功";
                        } else {
                            my$("msg").innerHTML = "登录失败";
                        }
                    } else {
                        my$("msg").innerHTML = "服务器内部错误";
                    }
                }
            }
            //4
            xhr.send(data);
        }

        function my$(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <input type="text" id="txtName" /><br />
    <input type="text" id="txtPwd" /><br />
    <input type="button" value="Login" οnclick="btn_click()" />
    <span id="msg"></span>
</body>
</html>

例3：省市选择效果

pro.ashx:

<%@ WebHandler Language="C#" Class="_06_pro" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
public class _06_pro : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string s = context.Request.QueryString["pid"];
        int pid;
        if (int.TryParse(s, out pid))
        { 
            //json形式的字符串
            string json = GetDataByPId(pid);
            context.Response.Write(json);
        }
        else    
        {
            context.Response.Write("[]");
        }
    }
    private string GetDataByPId(int pid)
    {
        List<Data> list = GetAllDatas();

        List<Data> wantedList = new List<Data>();
        foreach (Data data in list)
        {
            if (data.Pid == pid)
            {
                wantedList.Add(data);
            }
        }
        
        //拼json形式的字符串   
         //[{ "Id": 1, "Name": "河北省", "PId": 0 },
         //            { "Id": 2, "Name": "日本省", "PId": 0 },
         //            { "Id": 3, "Name": "台湾省", "PId": 0 }
         // ]
        StringBuilder sb = new StringBuilder();
        sb.Append("[");

        foreach (Data data in wantedList)
        {
            sb.Append("{ \"Id\": "+data.Id+", \"Name\": \""+data.Name+"\", \"PId\": "+data.Pid+" },");
        }
        sb.Remove(sb.Length - 1, 1);
        sb.Append("]");
        return sb.ToString();
    }
    
    /// <summary>
    /// 模拟从数据库中加载数据，返回泛型集合
    /// </summary>
    /// <returns></returns>
    private List<Data> GetAllDatas()
    {
        List<Data> list = new List<Data>();

        list.Add(new Data() { Id = 1, Name = "河北省", Pid = 0 });
        list.Add(new Data() { Id = 2, Name = "台湾省", Pid = 0 });
        list.Add(new Data() { Id = 3, Name = "日本省", Pid = 0 });


        list.Add(new Data() { Id = 4, Name = "石家庄", Pid = 1 });
        list.Add(new Data() { Id = 5, Name = "邯郸市", Pid = 1 });
        list.Add(new Data() { Id = 6, Name = "邢台市", Pid = 1 });

        list.Add(new Data() { Id = 7, Name = "高雄市", Pid = 2 });
        list.Add(new Data() { Id = 8, Name = "台北", Pid = 2 });
        list.Add(new Data() { Id = 9, Name = "台中", Pid = 2 });

        list.Add(new Data() { Id = 10, Name = "东京", Pid = 3 });
        list.Add(new Data() { Id = 11, Name = "冲绳", Pid = 3 });
        list.Add(new Data() { Id = 12, Name = "大阪", Pid = 3 });
        return list;
    }
    public bool IsReusable {
        get {
            return false;
        }
    }

}

pro.htm: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ajax.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            loadProvince();

            
        }
        function loadProvince() {
            var province = my$("province");
            //发送异步请求获取省的数据
            ajax("get", "06-pro.ashx?pid=0", null, function (s) {
                //把字符串转化成对象
                var array = eval(s);
                for (var i = 0; i < array.length; i++) {
                    var json = array[i];
                    var option = document.createElement("option");
                    option.innerHTML = json.Name;
                    option.value = json.Id;
                    province.appendChild(option);
                }
                //当省加载完，再加载市
                loadCity();

            }, function () {
                alert("服务器内部错误");
            });
        }

        function loadCity() {
            var pid = my$("province").value;
            var city = my$("city");
            //清空下拉框
            city.innerHTML = "";

            ajax("get", "06-pro.ashx?pid=" + pid, null, function (s) {
                //把字符串转化成对象
                var array = eval(s);
                for (var i = 0; i < array.length; i++) {
                    var json = array[i];
                    var option = document.createElement("option");
                    option.innerHTML = json.Name;
                    option.value = json.Id;
                    city.appendChild(option);
                }
            }, function () {
                alert("服务器内部错误");
            });
        }

    </script>
</head>
<body>
    <select id="province" οnchange="loadCity()">
    </select>
    <select id="city">
    </select>
</body>
</html>

自己封装的ajax：

function my$(id) {
    return document.getElementById(id);
}

var xhr = createXHR();
function createXHR() {
    var request;
    if (XMLHttpRequest) {
        request = new XMLHttpRequest();

    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return request;
}

function ajax(method,url,data,fnSuccess,fnError) {

    xhr.open(method, url, true);
    if (method == "post") {
        //!------------------!注意
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          
            if (xhr.status == 200) {
                var s = xhr.responseText;
                fnSuccess(s);
            } else {
                fnError();
            }
        }
    }
    xhr.send(data);
}

这里要感谢刘兄的指导，在此鸣谢！

==================== 迂者 丁小未 CSDN博客专栏=================

MyBlog：http://blog.csdn.net/dingxiaowei2013             MyQQ:1213250243

Unity QQ群：858550         cocos2dx QQ群：280818155

====================== 相互学习，共同进步 ===================

转载请注明出处：http://blog.csdn.net/dingxiaowei2013/article/details/17130553

欢迎关注我的微博： http://weibo.com/u/2590571922


丁小未
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax实例入门代码
10-30
想学习ajax的朋友，如果刚开始接触可以查看脚本之家的ajax栏目，之前的一些文章。
AJAX入门
weixin_46065399的博客
07-09 516
简单入门AJAX
ajax入门学习（一）
冷血之心的博客
01-31 2218
  （尊重劳动成果，转载请注明出处：http://blog.csdn.net/qq_25827845/article/details/54800237冷血之心的博客）   ajax入门学习（一） ajax入门学习（二）小案例Demo1 ajax入门学习（三）小案例Demo2     1　什么是AJAX AJAX（Asynchronous Javascript And XML）翻译...
Ajax快速入门
qq_45181415的博客
02-22 890
1、Ajax快速入门 1.1、AJAX介绍 AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。 本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。 一般的网页如果需要更新内容，必需重新加载个页面。 而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。 总结：异步的处理网络请求的工具，可以实现局部刷新 ​
Ajax入门教程
qq_22075913的博客
03-31 4735
Ajax 学习目标 了解Ajax的概念和作用 了解同步和异步的区别 能够使用jQuery的$.get()和$.post()发送Ajax请求 能够使用jQuery的$.ajax()方法发送Ajax请求 能够定义和解析json 能够使用Jackson转换json格式 能够使用fastjson转换json格式 第一章-JS的AJAX 知识点- AJAX的概述 1.目标 能够理解异步的概念 2.路径 什么是Ajax 什么是异步 为什么要学习Ajax 3.讲解 3
Ajax实战指南：快速入门
会思想的苇草i的博客
01-15 1156
前端开发中，Ajax是一种用于异步请求和更新网页内容的技术。通过Ajax，可以在不刷新整个页面的情况下，与服务器进行数据交互。这种技术使得用户能够更加流畅地浏览网页，并实现实时更新数据的功能。在前端开发中，掌握Ajax技术对于实现动态交互和提升用户体验非常重要。
Ajax开始准备入门篇
10-28
我很开心您来阅读我写的关于ajax的实例教程,无论您是第一次还是老朋友.我将在这里献上我至今所学,并毫不吝啬。
AJAX 简介及入门实例
10-29
最近在学校参加暑期实习，参与的是一个社交网站项目，学长那边分配给的任务是前端开发，需要学习AJAX技术。
python教程之ajax入门
最新发布
09-07
ajax基础学习、运行环境、获取服务器文件、eval使用、dom元素添加、封装库、数据类型、注册用户
AJAX实例入门
03-21
AJAX实例入门
ajax_入门实例_
03-20
NULL 博文链接：https://kaka100.iteye.com/blog/865502
ajax经典入门详解
11-06
ajax经典入门详解
AJAX最基础的知识
02-09
ajaxjichu，ajax基础1
AJAX入门实例-简单易懂
04-14
一个AJAX的入门实例，用最简单的代码表现什么是AJAX，AJAX的原理。 这个是——异步请求请求一个url。 还有一个是本页请求，用于asp.net。
Ajax 技术上手
仗剑天涯，从摘要开始
12-26 1248
Ajax 技术 第1章 认识Ajax 1.1 初识 ajax 我们平常上网，不管是注册账号，还是浏览网页，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端； 在我们之前学习代码中，向服务器提交数据典型的应用是就是 form 表单，其中的 action 就是我们提交数据的服务器端地址； 完成一个 form 表单； 当我们点击提交按钮时，页面就会跳转到服务器页面；...
Ajax入门
mimo_mimo的博客
03-12 153
ajax基本知识，http协议，express框架，get、post请求基本操作及案例
【Ajax】Ajax快速入门与案例
Zh0uKal1的博客
07-21 262
【Ajax】Ajax快速入门与案例
Ajax 从入门到进阶详解
starry-sea1412的博客
05-16 323
Ajax（Asynchronous JavaScript and XML）即 异步 JavaScript 和 XML，是一种运用于 Web 应用中的新技术。它利用浏览器提供的 XMLHttpRequest 对象，通过后台与服务器进行少量数据交换，并实现页面无刷新的更新，从而提高 Web 应用的交互性和用户体验。
ajax入门
05-27
以下是入门步骤： 1. 创建 XMLHttpRequest 对象（浏览器内置对象）： ```javascript var xmlhttp = new XMLHttpRequest(); ``` 2. 发送请求（使用 GET 或 POST 方法）： ```javascript xmlhttp.open("GET", "url...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值