一、AJAX概述

概念:AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

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

   AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

   传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

使用广泛:有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

二、AJAX工作原理

三、AJAX应用

例子1:使用ajax修改html文本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp; //定义局部变量xmlhttp
if (window.XMLHttpRequest) //XMLHttpRequet对象用于和服务器交互数据。
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button> </body>
</html>

  

 整体流程:

1、点击按钮‘修改内容’,则会加载loadXMLDoc()函数;

2、loadXMLDoc()函数的内容:

  定义局部变量xmlhttp对象,用于和服务器交互数据。

  如果向服务器请求完成,且服务器响应已就绪时,进行如下操作:

    1、设定操作。(本例设定修改id='myDiv‘的元素的内容。)

    2、准备数据;(获取数据的方法、url、是否异步)

    3、发送数据。(将数据发送给服务器)

注意:

1、获取数据的方法采用:GET还是POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

2、发送数据时,使用同步还是异步?

  当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

四、JQuery中的ajax

1、load方法

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:$(selector).load(URL,data,callback);

例子:当即button时,如果加载成功,则提示‘外部内容加载成功!’;如果加载失败,则提示:‘Error: 404: Not Found’

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/example/jquery/demo_tes.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});

});
});
</script>
</head>
<body> <div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button> </body>
</html>

  

2、post方法

语法:jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

视图函数:

@app.route('/user/add/', methods=['POST'])          #将url path=/user/add的post请求交由add_user处理
@login_required
def add_user():
username = request.form.get('username', '')
password = request.form.get('password', '')
age = request.form.get('age', '')
_session_id = session['user']['id']
_session_username = session['user']['username'] #检查用户信息是否合法
_is_ok, _error = User.validate_add_user(_session_username,username, password, age)
if _is_ok:
User.add_user(username, password, age) #检查ok,添加用户信息
return json.dumps({'is_ok':_is_ok, "error":_error})

  

前端通过ajax修改数据:

 var params = {};
params['username'] = jQuery('#user-username').val(); //获取id=password-userid的值
params['password'] = jQuery('#user-password').val(); //获取id=password-manager-password的值
params['age'] = jQuery('#user-age').val(); //获取id=password-user-password的值
console.log(params); //控制台显示
//通过ajax更新用户密码
jQuery.post('/user/add/',
params,
function(data) {
if(data['is_ok']){
alert('添加用户成功');
jQuery('#add-user').modal('hide'); //更新成功后,自动消失框框
//window.location.replace('/users/');
//window.location.reload();
} else {
alert(data['error']);
}
},
'json'
);

  

JQuery快速入门-Ajax的更多相关文章

  1. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  2. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  3. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  4. JQuery 快速入门

    1.要学习Jquery @首先要在需要的页面引入 <script type="text/javascript" src="jquery.js">&l ...

  5. JQuery 快速入门一篇通

    JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...

  6. JQuery快速入门

    Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John ...

  7. jquery快速入门(五)

    jQuery - AJAX AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,AJAX 通过后台加载数据,并在网页上进行显示,实现了对部分网页的更新. AJAX就是异步 JavaScri ...

  8. jquery快速入门(二)

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  9. JQuery快速入门-简介

    一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

随机推荐

  1. 使用MonkeyTest对Android客户端进行压力测试

    目录 monkey命令简介 monkey命令参数说明 自动化实例 如何通过日志定位问题   1.monkey命令简介 Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它 ...

  2. Oracle EBS INV 创建物料搬运单

    Create or Replace PROCEDURE ProcessMoveOrder AS -- Common Declarations l_api_version NUMBER := 1.0; ...

  3. Visual Studio 2010详细安装过程

    Visual Studio 2010在目前看来,应该是使用得比较多的一款微软的软件开发工具集合了,因为它具有以下优点:(1)启动速度快:在相同环境下,相比于Visual Studio 2015来说,2 ...

  4. Regmap 框架:简化慢速IO接口优化性能【转】

    1. 简介 Regmap 机制是在 Linux 3.1 加入进来的特性.主要目的是减少慢速 I/O 驱动上的重复逻辑,提供一种通用的接口来操作底层硬件上的寄存器.其实这就是内核做的一次重构.Regma ...

  5. 进程控制编程——Linux编程

    1.进程的创建 编写一段程序,使用系统调用fork( )创建两个子进程,在系统中有一个父进程和两个子进程活动.让每个进程在屏幕上显示一个字符:父进程显示字符“a”,子进程分别显示字符“b” 和“c”. ...

  6. linux安装mydumper软件包以及报错解决

    今天使用mydumper命令从AWS上的RDS集群MYSQL数据库导出数据,发现Tidb官方提供的工具不太适合,所以就自己编译了一个来尝试一下,居然成功了. 首先我的系统是Centos7,并且已经安装 ...

  7. 深入浅出Windows命令——telnet

  8. 基于CNN网络的汉字图像字体识别及其原理

    现代办公要将纸质文档转换为电子文档的需求越来越多,目前针对这种应用场景的系统为OCR系统,也就是光学字符识别系统,例如对于古老出版物的数字化.但是目前OCR系统主要针对文字的识别上,对于出版物的版面以 ...

  9. [提权]域内提权神器 MS14-068 完整EXP

     可以让任何域内用户提升为域管理员     c:\python27\python.exe ms14-068.py -u k8test3@k8.local -p k8team!@# -s S-1-5-2 ...

  10. PyQt5 的几个核心模块作用

    QtCore  包含了核心的非GUI功能.此模块用于处理时间.文件和目录.各种数据类型.流.URL.MIME类型.线程或进程. QtGui  包含类窗口系统集成.事件处理.二维图形.基本成像.字体和文 ...