ajax的基础知识

【定义】：AJAX即“Asynchronous Javascript AndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

优点：通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

【格式】：

$.ajax({

url: url,

dataType: 'json',

data: data,

success: callback

});

【应用小例子】：

1.html页的代码如下

<span style="font-family:KaiTi_GB2312;font-size:18px;"><%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Index</title>
    <%--如果要使用ajax，就必须引入这个脚本--%>
    <script src="../../Scripts/jquery-1.7.1.js"></script>
    <script src="../../Scripts/JavaScript1.js"></script>
</head>
<body>
    <div>
      <input  type="button" id="btnJqGetDate" value="获取时间"/> 
        <hr />
    </div>
</body>
</html>
</span>

2.相应的js代码

<span style="font-family:KaiTi_GB2312;font-size:18px;">//$(function(){}) 是 $(document).ready(function(){}) 的简写，用来在DOM加载完成之后执行一系列预先定义好的函数。 
$(function () {
    //"#btnJqGetDate"这个是从前台html页面读取的元素
    $("#btnJqGetDate").click(function () {
        $.ajax({
            //url:指定路由的路径
            url: "/Ajax/GetDate",type: "Post",//设置的回调函数
            success: function (data) {
                alert(data);
            }
        });
    });
});</span>

3.控制器界面的代码

<span style="font-family:KaiTi_GB2312;font-size:18px;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Mvc项目.Controllers
{
    public class AjaxController : Controller
    {
        //
        // GET: /Ajax/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetDate()
        {
            return Content(DateTime.Now.ToString());
        }

    }
}</span>

4.效果

【小结】

其实有关AJAX这块的知识，前面学习的时候学过，但是当时只是跟着老师依葫芦画瓢似的走了一遍，学习并不深入，导致这次在ITOO项目中，闹不明白前台数据是如何传送的。反思自己的前面的学习，觉得不会那就挂来，学习的很浅薄，于是一到项目中就死翘翘了。为什么这些学过的东西，还是不会用？追其原因，是自己忙着走马观花了，没有掌握。那为什么在学习的时候没有很好的掌握这些个知识点呢？我想这是和我自己的学习方式，思维方式有关系。通过这次将近两个月的ITOO的项目，我深刻的认识到自己在编故事总结这方面还有待提高。

原文地址：https://www.jb51.cc/ajax/162457.html

相关推荐