前言

使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程。

第一步:浏览器向DNS服务器发起DNS请求,DNS服务器解析域名后返回域名对应的网站服务器IP地址
第二步:浏览器获取IP地址后向网络服务器发送一个HTTP请求
第三步:网络服务器解析浏览器的请求后从数据库获取资源,将生成的html文件封装至HTTP 响应包中,返回至浏览器解析

下图抓包显示了访问“www.baidu.com”时,DNS请求和响应、HTTP请求和响应

第四步:浏览器解析HTTP 响应后,下载html文件,继而根据文件内包含的外部引用文件、图片或者多媒体文件等逐步下载,最终将获取到的全部文件渲染成完整的网站页面。

下图显示GET请求到HTML文件后继续请求了多个JS、CSS文件


前端与后端

浏览器显示的网页即为web前端界面,提供用户与网站进行交互的可视化接口,而web后端服务主要指在服务器中执行的逻辑运算和数据处理,它为前端提供着访问服务。所谓的前后端只是从代码被执行的位置来区分的,前端代码在用户面前被执行,后端代码在遥远的服务器上被执行。但是,无论前端或后端代码,都是存放在服务器上的,只是当浏览器请求的时候,从服务器发送过去而已。


AJAX介绍

在上述web应用工作的原理中,我们通过HTTP协议访问一个在服务端存在的文件,服务器可以找到该文件并将其内容封装到HTTP请求中,以消息体的形式返回给客户端。不过这种方式只能访问静态的页面,无法与后端数据库进行交互。既然用户需要通过web前端实时与后端数据库进行交互,那么网页也需要动态的更新,如果每次更新一个数据都通过重新获取Html文件的方式来实现势必会导致网络负荷加重,页面加载迟缓。而Ajax技术可以很好的解决这个问题。

Ajax即异步JavaScript和XML,是一种创建交互式网页的技术,可以不重新加载整个网页的情况下更新部分网页。目前jQuery库提供多个与AJAX相关的方法。通过 jQuery AJAX方法,能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON,同时能够把这些外部数据直接载入网页被选元素中。

作为web开发人员广泛采用的JavaScript封装库之一的jQuery库,它可以极大地简化我们的JavaScript编程,缓解浏览器之间不兼容的影响,要知道在不同浏览器中进行web网页的兼容性测试也是一个不小的工作量。我们可以通过一个简单的例子发现jQuery库的优势所在:

$("p.neat").addClass("ohmy").show("slow");

通过以上简短的代码,开发者可以遍历“neat”类中所有的<p>元素,然后向其增加“ohmy”类,同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型,无需编写循环代码,无需编写复杂的动画函数,仅仅通过一行代码就能实现上述效果。jQuery的口号“最少的代码做最多的事情”果真名副其实,它把JavaScript带到了一个更高的层次。


JSON格式介绍

对于交互的数据格式,这里采用JSON(JavaScript Object Notation),它是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据。JSON键值的层次结构简洁清晰,易于阅读和编写,使得 JSON 成为理想的数据交换语言。举个例子来理解JSON数据格式:

{//JSON键/值对
“'wJsona'”:”kkk”
“'wjsonb'”:”12”
“'wjsonc”:”80”
}

代码实现

下面介绍前端jQuery .ajax()请求JSON数据的方法,代码如下:

        function useTestFun() {
            $.ajax({
                url: "/Usedefine",//获取数据的URL
                data:JSON.stringify({
                    'wJsona':"kkk",       
                    'wjsonb':12,
                    'wjsonc':80,
                }),
                type: "POST",//HTTP请求方法
                dataType:'JSON',//获取数据执行方式
                success:function(data){
                    if(data.status == 'True'){//传入为JSON对象格式
                        alert('连接成功');
                    }
                    else{
                        $("#labletip").show();
                    }
                },
                error:function(err){
                    alert('连接失败');
                }
            });
        }

在数据传输过程中,JSON是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以JSON对象和JSON字符串之间的相互转换是关键,可以使用JSON.stringify()将JSON对象转化为JSON字符串,使用JSON.parse()将JSON字符串转换为JSON对象。

JSON字符串:    var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象: var str2 = { "name": "cxh", "sex": "man" };
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
var last = obj.toJSONString(); //将JSON对象转化为JSON字符
var last = JSON.stringify(obj); //将JSON对象转化为JSON字符

如下所示为HTTP协议中JSON数据的传输格式,后端服务器可使用第三方JSON库来处理JSON数据,返回JSON数据时对HTTP协议的Content-Type字段设置为“application/json”。

基于Ajax技术的前后端Json数据交互方式实现的更多相关文章

  1. 前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构

    前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构

  2. 前端ajax用post方式提交json数据给后端时,网络报错 415

    项目框架:spring+springmvc+mybatis 问题描述:前端ajax用post方式提交json数据给后端时,网络报错 415 前端异常信息:Failed to load resource ...

  3. 基于spring security 实现前后端分离项目权限控制

    前后端分离的项目,前端有菜单(menu),后端有API(backendApi),一个menu对应的页面有N个API接口来支持,本文介绍如何基于spring security实现前后端的同步权限控制. ...

  4. Web应用程序开发,基于Ajax技术的JavaScript树形控件

    感谢http://www.cnblogs.com/dgrew/p/3181769.html#undefined 在Web应用程序开发领域,基于Ajax技术的JavaScript树形控件已经被广泛使用, ...

  5. content-type常见类型辨析(以ajax与springmvc前后端交互为例)

    博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...

  6. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  7. 【开源.NET】 轻量级内容管理框架Grissom.CMS(第二篇前后端交互数据结构分析)

    这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...

  8. ajax请求、servlet返回json数据

    ajax请求.servlet返回json数据 1.方式一 response.setcontenttype("text/html;charset=utf-8"); response. ...

  9. 通过ajax和spring 后台传输json数据

    在通过ajax从页面向后台传数据的时候,总是返回415(Unsupported media type)错误,后台无法获取数据.如下图所示: 在尝试解决这个问题的时候,我们首先要理解一下概念: @req ...

随机推荐

  1. POJ 1734:Sightseeing trip

    Sightseeing trip Time Limit: 1000MS Memory Limit: 65536K Total Submissions: Accepted: Special Judge ...

  2. Linux增加swap空间大小解决编译错误collect2:ld terminated with signal 9(或11)

    编译llvm的时候:collect2:ld terminated with signal 9(或11) 1 Creating a file for 1024 MB size you want: We ...

  3. 修改profile导致bash不能用的补救方法

    输入这条命令:export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin 由于shell命令基本都在/usr/bin,/usr/sbin,/bin ...

  4. new pdo 连接很慢的原因和解决办法

    1.使用IP而不是域名,使用域名会让PDO在连接之前进行一次不必要的dns lookup,当DNS缓存过于巨大的时候,这个问题可能会更严重.(即使是运行在本机,使用 127.0.0.1 而不是 loc ...

  5. webpack-dev-server 导致的 invalid host header

    这几天做的一个项目,在这个项目的 js 方面,我将其分业务和功能的拆分成模块化,然后使用 webpack 来进行打包.(第一次在公司产品中使用 webpack) 然后使用了 webpack-dev-s ...

  6. rownum伪行号-排行榜-分页

    rownum伪行号-排行榜-分页 1.rownum 是oracle数据库特有的一个特性,它针对每一个查询(包括子查询),都会生成一个rownum用于对该次查询进行编号 2.每个rownum只针对当前s ...

  7. Lucene 全文检索

    基于 lucene 8 1 Lucene简介 Lucene是apache下的一个开源的全文检索引擎工具包. 1.1 全文检索(Full-text Search) 全文检索就是先分词创建索引,再执行搜索 ...

  8. 杜教BM递推板子

    Berlekamp-Massey 算法用于求解常系数线性递推式 #include<bits/stdc++.h> typedef std::vector<int> VI; typ ...

  9. 玩linux笔记——持续更新

    说在最前面 centos 是基于redhat linux,所以最好的教程在红帽官网 https://access.redhat.com/documentation/en-us/red_hat_ente ...

  10. 怎样设置Cookie

    因为 Cookie 是服务器保存在浏览器中的一小段信息, 因此这个设置应当是服务器发起的, 设置方法是在Response Header中添加: Set-Cookie字段, 值是多个键值对. 如下: / ...