ajax中使用总结

简介: ajax中使用总结

引言


最早接触到ajax这个名词是在做图书馆系统的时候,那时候我是负责底层EF实体,因为都是现学现用所以很多的时间都在学习这方面的知识,而负责前台开发的人员在讨论的时候总是在提到ajax这个名词但是因为自己没有接触过所以当时非常的好奇这到底是个什么东西?随后在图书馆系统开发完成以后,接手了一个标项目的开发,这个项目采用了MVC+EF架构,在看师哥面写的前台的代的时候,基本上都是js代码,js和controlle还有页面交互的时候ajax这个东西再次出现,这次不得不了解了,因为我们需要用到这个东西来完成我们负责的西,下面就总结一下ajax的一些基本知识。


ajax是什么?


ajax是指一种创建交互式网页应用的网页开发技术,是一种用于创建快速动态网页的技术。 它通过在后台与服务器进行少量的数据交换,ajax可以实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页如果需要更新内容,必须重新加载整个网页页面。


ajax工作原理


20150727153834964.jpg

不知道大家看了这样一张图是否对ajax的工作原理有了一定的理解,反正在我们第一次看到这个图的时候没有理解,因为这张图简直是太抽象太专业了,对于初学者来说理解还是有很大难度的,下面我就结合一端小程序来给大家通俗的介绍ajax的工作原理。


js代码:

   function AddBidTInfo() {
            var temp = document.getElementById("BidZNo");
            var BidZNo = temp.innerHTML;
            //var companyCategory = $("#companyCategory option:selected").text();  //获取选中的项
            var companyCategory = $('#companyCategory').combobox('getText')//获取当前选中的值
            var companyName = document.getElementById("companyName").value;
            var LegalPerson = document.getElementById("LegalPerson").value;
            var ProjectPrincipal = document.getElementById("ProjectPrincipal").value;
            var Tel = document.getElementById("Tel").value;
            //照片没有进行处理
            var DelegateLetter = ShowPhoto("preview");
            var ApplyPicture = ShowPhoto("previewImag");
            //获取委托书照片的名称
            $.post("/BidTRecordManager/AddBidTInfo",
                {
                    "BidZNo": BidZNo, "companyCategory": companyCategory, "companyName": companyName,
                    "LegalPerson": LegalPerson, "ProjectPrincipal": ProjectPrincipal, "Tel": Tel, "DelegateLetter": DelegateLetter, "ApplyPicture": ApplyPicture
                }, function (result) {
                    alert(result);
                });
        }

controller中的代码:

        public string AddBidTInfo()
        {
            string returnMessage = "添加成功";
            var BidZNo = Request["BidZNo"];
            var companyType = Request["companyCategory"];
            var companyName = Request["companyName"];
            var LegalPerson = Request["LegalPerson"];
            var ProjectPrincipal = Request["ProjectPrincipal"];
            var Tel = Request["Tel"];
            var delegateLetter = Request["DelegateLetter"];
            var applyPicture = Request["ApplyPicture"];
            //var delegateLetter = Request["DelegateLetter"];
            BidTRecorderViewModel enBidTRecordVM = new BidTRecorderViewModel
            {
                BidUserId = Guid.NewGuid(),
                CompanyName = companyName,
                CompanyCategory = companyType,
                LegalPerson=LegalPerson,
                ProjectPrincipal = ProjectPrincipal,
                Tel = Tel,
                //委托书, 报名人照片, 存储方式
                // ApplyPicture 
                DelegateLetter = delegateLetter,
                ApplyPicture = applyPicture
            };
            try
            {
                iBidTRecordManagerWCF.AddBidTInfo(enBidTRecordVM);
            }
            catch (Exception r)
            {
                throw;
            }
            // iBidTRecordManagerWCF.AddBidTInfo(enBidTRecordVM);
            return returnMessage;
        }


其实ajax的工作原理简单理解就是双向传值——我们首先从js传递参数到controller里面进行处理,然后自动接收处理的结果。其实这就是ajax传值的原理。通过


<span style="font-family: KaiTi_GB2312;"> $.post("/BidTRecordManager/AddBidTInfo",</span>
                {
                    "BidZNo": BidZNo, "companyCategory": companyCategory, "companyName": companyName,
                    "LegalPerson": LegalPerson, "ProjectPrincipal": ProjectPrincipal, "Tel": Tel, "DelegateLetter": DelegateLetter, "ApplyPicture": ApplyPicture
                },


将参数传递到BidTRecordManagerController中的AddBidTinfo()这个方法中,在这个方法中用request接收传递的参数进行处理,然后将结构自动传递到ajax中。

function (result) {
                    alert(result);

其中的result就是controller中处理的结果,这样我们就实现了双向传值的效果。


 ajax的应用优势


ajax最大的优势就是浏览器和web服务器之间使用异步数据传输,这样就可使网页从服务器请求少量的信息,而不是整个页面。ajax是因特网应用程序更小、更快、更友好。它是独立于web服务器软件的浏览器技术。


小结


在做项目的时候根本就不知道ajax到底是个什么东西,就是按照别人的代码来写,有一天在调错的时候突然就明白了这个原理,然后就很顺手的写一些代码了,其实学习就是这么个过程,在开始就是不能明白其中的一些知识,然后在某一天用到的时候也许会突然就明白了,所以我们不必为不会的知识苦恼,早晚有一天我们都会明白了,所以大胆向前就是了。

目录
相关文章
|
前端开发
Ajax第五天笔记总结(二)
Ajax第五天笔记总结(二)
114 0
Ajax第五天笔记总结(二)
|
前端开发 数据格式
Ajax第五天笔记总结(一)
Ajax第五天笔记总结
121 0
Ajax第五天笔记总结(一)
|
缓存 前端开发
Ajax第四天笔记总结(二)
Ajax第四天笔记总结(二)
119 0
Ajax第四天笔记总结(二)
|
JSON 前端开发 JavaScript
Ajax第四天笔记总结(一)
Ajax第四天笔记总结
165 0
Ajax第四天笔记总结(一)
|
移动开发 前端开发 JavaScript
Ajax第三天笔记总结(二)
Ajax第三天笔记总结(二)
72 0
Ajax第三天笔记总结(二)
|
XML 存储 JSON
Ajax第三天笔记总结(一)
Ajax第三天笔记总结(一)
155 0
Ajax第三天笔记总结(一)
|
前端开发 索引 容器
Ajax第二天笔记总结(二)
Ajax第二天笔记总结(二)
173 0
Ajax第二天笔记总结(二)
|
数据采集 前端开发 JavaScript
Ajax第二天笔记总结(一)
Ajax第二天笔记总结
200 0
Ajax第二天笔记总结(一)
|
前端开发 JavaScript 机器人
Ajax第一天笔记总结(二)
Ajax第一天笔记总结(二)
252 0
Ajax第一天笔记总结(二)
|
XML Web App开发 前端开发
Ajax第一天笔记总结(一)
Ajax第一天笔记总结
130 0
Ajax第一天笔记总结(一)