Ajax异步请求技术实例讲解

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX不是新的编程语言,而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

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

在Web应用开发过程中,业界对前后端的分界线似乎一直都没有确定的概念,不过大多数人以浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称为前端,而将运行于服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端。

虽然前后端分离在数年前就已经开始受到关注,但很多人对它却是只闻其声,未见其形,所以对它产生了一些误解,误以为前后段分离只是一种Web应用的开发模式,只要在Web应用的开发期进行了前后端开发工作的分工就是前后端分离。

其实并非如此,准确的说,前后端分离并不只是开发模式,而是Web应用的一种架构模式。在开发期,前后端工程师可以通过约定好交互接口,实现并行开发;在运行期,前后端分离模式需要对Web应用进行分离部署,前后端之间使用HTTP请求进行交互。

一、JSON解析

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成。简单地说,JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。

二、Ajax接口调用

前后端分离意味着,前后端之间使用 JSON 来交流,两个开发团队之间使用 API 作为契约进行交互, 通过JSON字符串,然后在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。这部分学习的就是如何从前台向后台发起一个Ajax请求,最后得到服务器返回的数据响应之后,进行前端页面的更新。

三、php后台

PHP是一种流行的通用脚本语言,特别适合于web开发。php语言具有以下特点:

1、跨平台,性能优越,和很多免费的平台结合非常省钱,比如LAMP(Linux /Apache/Mysql/PHP)或者FAMP(FreeBSD/Apache/Mysql/PHP)结合,或者数据应用够大可以考虑换 PostgreSQL或者Oracle,支持N种数据库。(N >= 10)

2、语法简单,如果有学习C和Perl的很容易上手,并且跟ASP有部分类似。有成熟的开发工具,比如NuPHPed,或者Zend Studio等等,再Linux平台下可以使用Eclipse等等。

3、目前主流技术都支持,比如WebService、Ajax、XML等等,足够应用。

4、有很多成熟的框架,比如支持MVC的框架:phpMVC,支持类似ASP.net的事件驱动的框架:Prado,支持类似Ruby On Rails的快速开发的框架:Cake等等,足够满足你的应用需求。

5、PHP 5已经有成熟的面向对象体系,能够适应基本的面向对象要求。适合开发大型项目。

这部分主要学习的如何搭建一个php服务器,掌握PHP的基本语法,通过php生成一个动态网页,掌握如何使用php完成一个标准化的接口,最终返回JSON数据给前台。

四、数据库

数据库(Database)是按照数据结构来组织、存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制 所保存的数据。我们也可以将数据存储在文件中,但是在文件中读写数据速度相对较慢。

MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司。MySQL是一种关联数据库管理系统,关联数据库将数据保存在 不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性。

• Mysql是开源的,所以你不需要支付额外的费用。

• Mysql支持大型的数据库。可以处理拥有上千万条记录的大型数据库。

• MySQL使用标准的SQL数据语言形式。

• Mysql可以允许于多个系统上,并且支持多种语言。这些编程语言包括C、C++、Python、Java、Perl、PHP、Eiffel、Ruby和Tcl等。

• Mysql对PHP有很好的支持,PHP是目前最流行的Web开发语言。

• MySQL支持大型数据库,支持5000万条记录的数据仓库,32位系统表文件最大可支持4GB,64位系统支持最大的表文件为8TB。

这部分主要学习的是数据中的增删改查操作,最后通过php访问数据中的数据,然后通过响应的处理,发挥给前台使用。

五、Ajax跨域

由于在工作中需要使用AJAX请求其他域名下的请求,但是会出现拒绝访问的情况,这是因为基于安全的考虑,AJAX只能访问本地的资源,而不能跨域访问。

解决方式一:

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法,对跨域访问提供了很好的支持,并且还有一些新的功能。

* IE10以下的版本都不支持

* 只需要在服务器端头部加上下面两句代码:

header( "Access-Control-Allow-Origin:*" ); header( "Access-Control-Allow-Methods:POST,GET" );

解决方式二:

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

总结

以上所述是小编给大家介绍的Ajax异步请求技术实例讲解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-08-29 13:32:19

Ajax异步请求技术实例讲解的相关文章

jQuery中借助deferred来请求及判断AJAX加载的实例讲解_jquery

ajax请求异步队列加载我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞的问题.通常表现为在加载大量数据时由于加载时间过长导致页面不能点击.gif动画卡死以及浏览器崩溃等问题.所以,一般情况下,尽量使用ajax异步加载. 可是,我们有些时候的需求要求ajax同步加载,一个加载完再加载下一个,即所谓的队列.前面我们有说过,同步加载会引起UI渲染阻塞问题.那么我们要怎么实现

jquery的ajax异步请求接收返回json数据实例_jquery

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () {     $.ajax({         type : "GET",         url : "a.php",         dataType : "json

SpringMVC环境下实现的Ajax异步请求JSON格式数据_AJAX相关

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

浅谈Jquery中Ajax异步请求中的async参数的作用_jquery

之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html <a href="javascript:void(0)" onmouseover="testAsync()"> asy.js function testAsync{ var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', complete: functi

ajax异步调用数据实例

ajax异步调用数据实例 通过ajax在客户端调用后台代码,通过后台代码更改,修复,查询数据,并把结果返回给客户端,在客户端获取到服务器返回的数据在做相应的操作,从而实现通过HTML控件操作一些在网页特效比较难实现的功能:比如通过HTML的控件访问查询数据库教程,并把结果传给客户端显示,这方面在google地图开发应用得比较多,下面以一个简单的实例说明: 添加一个.asp教程x的页面,命名为:ajaxPKashx.aspx,全部代码如下:  1 <%@ Page Language="C#&

SpringMVC环境下实现的Ajax异步请求JSON格式数据

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem

Ajax异步请求PHP数据

接到了老师的一个作业,实现的布局如图: 如果输入了科室ID,科室名字只显示与ID对应的,若没有输入,则显示全部,然后根据I科室名字的值,在所属大科中的文本框自动显示科室名字所在的大科.例如:选择了心血管内科,则在所属大科显示内科. 主要代码如下: 根据ID请求科室 function showHint(str) { var xmlhttp; if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new

Ajax异步请求JSon数据(图文详解)_AJAX相关

上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图:

大数据-ajax异步请求数据问题。。。看不出哪里错了。。。跪求大神指点。。。

问题描述 ajax异步请求数据问题...看不出哪里错了...跪求大神指点... 我做ajax读取Excel表格里的数据...这是JAVA代码 java: public static List<HashMap<Object,Object>> readExcel(String excelPath){ //声明一个集合用于存储解析出来的数据 List<HashMap<Object,Object>> maps = new ArrayList<HashMap&l