Ajax 原理 & 基本案例

2017-12-03 13:24:47来源:CSDN作者:joeson7456人点击

分享

Ajax基本原理剖析

基本概念

Asynchronous Javascript and XML。
一种用于创建快速动态网页的技术,与服务器进行少量的交换,使页面实现更新

常见案例

  • 搜索页 无刷新显示搜索结果
  • 注册页面提示 输入项目是否可用
  • 天猫购物车添加删除修改

异步加载优势

  1. 请求少量数据,而不是整个页面
  2. 使得因特网程序更小更快更加友好

所需掌握知识

  1. 一门服务端开发语言 PHP/Java/Python
  2. . Javascript前端开发语言 JQuery/ HTML

Ajax基本原理

基本工作原理

  1. 在服务器和用户中间加了一个中间层
  2. 异步请求不会阻塞客户端的操作
  3. 客户端通过浏览器内置的XMLHttpRequest来发送异步请求

三种方式实现异步加载

Get请求

代码最能说话,一下是前端代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <title>Ajax Demo</title></head><body>    <button id="btn">Send An Ajax Request</button>    <div id="box"></div></body><script>    $("#btn").click(function(){        $.get("demo1.php",{'username':'json','age':'18'},function(data){            $("#box").html(data);        } );    });</script></html>

下面是后端的处理

<?phpecho 'Test Ajax';echo '<pre>';var_dump($_GET);echo '</pre>';?>

Post请求

代码和上面几乎类似,只是把 $.get() 改成 $.post().

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <title>Ajax Demo</title></head><body>    <button id="btn">Send An Ajax Request</button>    <div id="box"></div></body><script>    $("#btn").click(function(){        $.post("demo1.php",{'username':'json','age':'18'},function(data){            $("#box").html(data);        } );    });</script></html>

下面是后端的处理

<?phpecho 'Test Ajax';echo '<pre>';var_dump($_POST);echo '</pre>';?>

Ajax()请求

ajax方式其实涵括get和post,内容格式和上面也有所区别。
前端

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <title>Ajax Demo</title></head><body>    <button id="btn">Send An Ajax Request</button>    <div id="box"></div></body><script>    $("#btn").click(function(){        $.ajax({            'url':'demo1.php',            'data':{'username':'json','age':18},            'success':function(data){                $("#box").html(data);            },            'dataType':'html',            'type':'get'            //'type':'post'        });    });</script></html>

后端如上

<?phpecho 'Test Ajax';echo '<pre>';var_dump($_GET);//var_dump($_POST);echo '</pre>';?>

发送类型说明

  • “xml”: 返回 XML 文档。
    “html”: 返回纯文本 HTML 信息。
    “script”: 返回纯文本 JavaScript 代码。
    “json”: 返回 JSON 数据 。
    “jsonp”: JSONP 格式。
    “text”: 返回纯文本字符串

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台