目录

  • Ajax
    • 1. 原生 JS 实现 Ajax
    • 2. 使用 Ajax 实现异步通信
      • a. Ajax 的基础语法
      • b. 用 Ajax 传递数据
        • i. 传递字符串数据
        • ii. 传递 JSON 数据
    • 3. 异步通信案例：搜索候选栏
      • a. 主要功能
      • b. 代码实现
      • c. 示例文档与效果图

Ajax

Ajax（Asynchronous Javascript And XML，异步 JavaScript 和 XML）：一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax 可以请求并获取服务器的数据，来完成与服务的通信。例如，当向搜索引擎的输入框中输入字符时，Ajax 把输入的字符发送给了服务器，服务器返回搜索候选项；当输入用户名时，页面通过 Ajax 把用户名发送给服务器，服务器返回用户是否重复的检验结果。
1. 原生 JS 实现 Ajax
使用原生 JS 实现 Ajax 的异步通信功能：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>原生js实现ajax异步通信</title>
  6. </head>
  7. <body>
  8. <!--
  9. js原生ajax实现原理
  10.     XMLHttpRequest 一个可以向服务器发送数据,并能接受返回数据的js对象. 常用方法和属性
  11.         open(method，url，boolean async):创建打开一个连接 参数method请求方式 url服务器地址 async是否异步
  12.         send():开始发送数据
  13.         readyState:请求就绪状态 值为4时说明请求准备完成
  14.         onreadystatechange:监听请求就绪状态的改变
  15.         status:请求完成情况 值为200时说明请求成功完成
  16.         responseText:服务器返回的文本
  17.  
  18. 查询手册完成功能:
  19.     点击图片时,请求服务器获取数据,把接收的数据显示在页面
  20.  
  21. -->
  22. <img src="../img/timing.gif" onclick="doAjax()">
  23. <p id="describe">GIF</p>
  24. <script type="text/javascript">
  25.     let http = new XMLHttpRequest();//一个可以向服务器发送数据并接收服务器返回数据的对象
  26.     let result = null;//服务器返回的数据
  27.     http.onreadystatechange = function(){//请求就绪状态改变时
  28.         // console.log(http.readyState);//请求就绪状态
  29.         if(http.readyState ==  && http.status == ){//请求成为完成
  30.             let res = http.responseText;//服务器返回的文本数据
  31.             result = res;//服务器返回的数据
  32.             console.log("res="+res);
  33.         }
  34.     };
  35.  
  36.     //点击图片时,请求服务器获取数据,把接收的数据显示在页面
  37.     function doAjax(){
  38.         //发送ajax请求
  39.         http.open("get","../data/info.txt",true);//创建打开一个异步请求
  40.         // http.open("get","../data/info.txt",false);//创建打开一个同步请求
  41.         http.send();//开始发送数据
  42.  
  43.         //其它业务代码
  44.         console.log("其它业务代码 result="+result);//发送ajax之后的其它js业务代码
  45.         //同步 发送ajax请求之后其它js业务代码必须等待ajax请求成功以后才能执行
  46.         //异步 发送ajax请求之后的其它js业务代码的执行,与ajax请求的执行,没有任何关系.
  47.         //总结: ajax异步请求时服务器返回的数据只能在ajax请求完成的回调函数中使用.
  48.     }
  49.  
  50. </script>
  51. </body>
  52. </html>

2. 使用 Ajax 实现异步通信
JS 是一门前端语言。
Ajax 是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
jQuery 是一个框架，它对 JS 进行了封装，使其更方便使用。jQuery 使得 JS 与 Ajax 的使用更方便。这里使用的是 jQuery 的 Ajax 插件。
a. Ajax 的基础语法

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jquery的Ajax基础语法</title>
  6. </head>
  7. <body>
  8. <!--
  9. jquery ajax语法:
  10.     $.ajax(配置); 配置是个JSON对象 常用属性有
  11.         type 请求方式 get post
  12.         url 服务器地址
  13.         data 发送给服务器的数据 d
  14.         ataType 预期服务器将要返回的数据类型 text json
  15.         async 是否异步 默认true异步
  16.         success 请求成功时的回调函数
  17.         error 请求失败时的回调函数
  18.  
  19.     使用示例:
  20.         //发送ajax请求
  21.         $.ajax({
  22.             type:"get",
  23.             url:"../data/student.txt",
  24.             data:{name:"张三",pass:},
  25.             dataType:"text",
  26.             async:true,
  27.             success:function(response){},
  28.             error:function(error){}
  29.         });
  30.  
  31.     简写形式:
  32.         语法: $.get(url,data,success); 使用示例:
  33.             $.get("test.php", { name: "张三", pass: "" },
  34.                 function(response){
  35.                     console.log(response);
  36.                 });
  37.  
  38.         语法: $.post(url,data,success); 使用示例:
  39.             $.post("test.php", { name: "张三", pass: "" },
  40.                 function(response){
  41.                     console.log(response);
  42.                 });
  43.  
  44. -->
  45. </body>
  46. </html>

b. 用 Ajax 传递数据

  • student.txt：
  1. {
  2.     "id":,
  3.     "name":"刘一",
  4.     "age":,
  5.     "addr":"广州市",
  6.     "desc":"跑步"
  7. }
  1. JSON 的格式规定，文档里的 JSON 因为是字符串格式所以属性和内容都要加双引号。如果返回的是 JSON 数组，那就是 [{},{},..]

i. 传递字符串数据

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery的ajax传递数据</title>
  6.     <!--引入Jquery库文件-->
  7.     <script src="../js/jquery-1.11.3.js">
  8.  
  9.     </script>
  10. </head>
  11. <body>
  12. <!--
  13. jQuery的ajax示例
  14.     .点击图片请求服务器(用本地json文件模拟服务器),并把接受到的数据显示在页面
  15.  
  16. -->
  17. <img src="../img/timing.gif" onclick="doAjax()">
  18. <p id="describe">GIF</p>
  19. <script type="text/javascript">
  20.     //1.点击图片请求服务器(用本地文件模拟服务器),并把接受到的数据显示在页面
  21.     function doAjax(){
  22.  
  23.         let result = null;//服务器返回的数据
  24.  
  25.         //发送ajax请求
  26.         $.ajax({
  27.             type:"get", //本地文件只能使用get方式
  28.             url:"../data/student.txt",//服务器地址
  29.             //dataType:"json",//预期服务器返回json,走一次JSON.parse()
  30.             success:function(response){//成功回调
  31.                 console.log(response);
  32.                 let resObj = JSON.parse(response);//把服务器返回的字符串转为对象
  33.                 console.log("resObj.desc="+resObj.desc);//描述信息
  34.                 result =resObj.desc;//把服务器返回的字符串
  35.                 $("#describe").text(resObj.desc);//把服务器返回的数据显示在页面
  36.             },
  37.             error:function(error){//失败回调
  38.                 console.log(error);
  39.             }
  40.         });
  41.  
  42.         //其它业务代码
  43.         console.log("其它业务代码 result="+result);//发送ajax之后的其它js业务代码
  44.         //同步:发送ajax请求之后其它js业务代码必须等待ajax请求成功以后才能执行
  45.         //异步:发送ajax请求之后的其它js业务代码的执行,与ajax请求的执行,没有任何关系
  46.         //总结:ajax异步请求时服务器返回的数据只能在ajax请求完成的回调函数中使用
  47.     }
  48.  
  49. </script>
  50. </body>
  51. </html>

ii. 传递 JSON 数据

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery的ajax传递数据</title>
  6.     <!--引入Jquery库文件-->
  7.     <script src="../js/jquery-1.11.3.js">
  8.  
  9.     </script>
  10. </head>
  11. <body>
  12. <!--
  13. jQuery的ajax示例
  14.     .点击图片请求服务器(用本地json文件模拟服务器),并把接受到的数据显示在页面
  15.  
  16. -->
  17. <img src="../img/timing.gif" onclick="doAjax()">
  18. <p id="describe">GIF</p>
  19. <script type="text/javascript">
  20.     //1.点击图片请求服务器(用本地文件模拟服务器),并把接受到的数据显示在页面
  21.     function doAjax(){
  22.  
  23.         let result = null;//服务器返回的数据
  24.  
  25.         //发送ajax请求
  26.         $.ajax({
  27.             type:"get", //本地文件只能使用get方式
  28.             url:"../data/student.txt",//服务器地址
  29.             dataType:"json",//加了dataType, 回调传递的就是直接可以操作的json对象
  30.             success:function(response){//成功回调
  31.                 console.log(response);
  32.                 console.log("resObj.desc="+response.desc);//描述信息
  33.                 result =response.desc;//把服务器返回的字符串
  34.                 $("#describe").text(result);//把服务器返回的数据显示在页面
  35.             },
  36.             error:function(error){//失败回调
  37.                 console.log(error);
  38.             }
  39.         });
  40.  
  41.         //其它业务代码
  42.         console.log("其它业务代码 result="+result);//发送ajax之后的其它js业务代码
  43.         //同步:发送ajax请求之后其它js业务代码必须等待ajax请求成功以后才能执行
  44.         //异步:发送ajax请求之后的其它js业务代码的执行,与ajax请求的执行,没有任何关系
  45.         //总结:ajax异步请求时服务器返回的数据只能在ajax请求完成的回调函数中使用
  46.     }
  47.  
  48. </script>
  49. </body>
  50. </html>

3. 异步通信案例：搜索候选栏

a. 主要功能

  1. 使用本地文件模拟服务器；
  2. 实现百度的搜索候选功能。

b. 代码实现

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>搜索候选栏</title>
  6.     <!--引入Jquery库文件-->
  7.     <script src="../js/jquery-1.11.3.js"></script>
  8.     <style type="text/css">
  9.     .content {
  10.         width: 643px;
  11.         margin: 200px auto;
  12.         text-align: center;
  13.     }
  14.  
  15.     input[type='text'] {
  16.         width: 534px;
  17.         height: 40px;
  18.         font-size: 14px;
  19.     }
  20.  
  21.     input[type='button'] {
  22.         width: 100px;
  23.         height: 46px;
  24.         background: #38f;
  25.         border: ;
  26.         color: #fff;
  27.         font-size: 15px
  28.     }
  29.  
  30.     .show {
  31.         position: absolute;
  32.         width: 516px;
  33.         border: 1px solid #efefef;
  34.         border-top: ;
  35.         display: none;
  36.         text-align: left;
  37.         color: darkgray;
  38.         line-height: 20px;
  39.         padding: 5px 10px;
  40.     }
  41.     </style>
  42.     <script type="text/javascript">
  43.         //当键盘按键弹起时调用
  44.         function searchWord(obj) {
  45.             console.log(obj.value);//当前输入内容
  46.             if(obj.value.length == )
  47.                 return;//没有输入内容时不显示搜索候选
  48.  
  49.             $("#show").empty();//每次添加搜索候选项之前,先把以前的候选项清除
  50.  
  51.             let reg = new RegExp("^"+obj.value);//匹配以当前输入内容开头的字符
  52.  
  53.             //把用户输入的字符发送给服务器
  54.             $.ajax({
  55.                 type:"get",//请求方式
  56.                 url:"../data/data.txt",//模拟服务器地址
  57.                 data:{"msg":obj.value},//发送给服务器的数据
  58.                 success:function(response){
  59.                     console.log("response=" + response);
  60.                     console.log(typeof response);//string
  61.                     let arr = JSON.parse(response);//把string字符串转为object对象(数组)
  62.                     for(let s of arr){//迭代候选项
  63.                         if(reg.test(s)){//是否是以输入字符开头
  64.                             $("#show").append("<div>"+s+"</div>");//追加搜索候选项
  65.                         }
  66.                     }
  67.  
  68.                     // $("#show").css("display","block");//显示div
  69.                     $("#show").show();//同上
  70.                     // $("#show").hide();//隐藏
  71.                 },
  72.                 error:function(error){
  73.                     console.log(error);//失败信息
  74.                 }
  75.             });
  76.         }
  77.     </script>
  78. </head>
  79. <body>
  80. <div class="content"><input type="text" name="word" onkeyup="searchWord(this)"><input type="button" value="搜索一下">
  81.     <div class="show" id="show"></div>
  82. </div>
  83. </body>
  84. </html>

c. 示例文档与效果图

  • data.txt：
  1. [
  2.     "id:qwert",
  3.     "name:Regino",
  4.     "name:Reggie",
  5.     "age:23",
  6.     "addr:Guangdong",
  7.     "blog:https://blog.csdn.net/Regino"
  8. ]

因为接受的是数组形式，所以这里是 JSON 的数组类型。

  1.  

Ajax 简述与基础语法的更多相关文章

  1. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  2. 从零开始学 Web 之 Ajax（二）PHP基础语法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三（MySQL） Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段

    ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...

  4. Ajax基础知识 浅析（含php基础语法知识）

    1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...

  5. python基础语法、数据结构、字符编码、文件处理 练习题

    考试范围 '''1.python入门:编程语言相关概念2.python基础语法:变量.运算符.流程控制3.数据结构:数字.字符串.列表.元组.字典.集合4.字符编码5.文件处理''' 考试内容 1.简 ...

  6. jQuery 基础语法

    jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...

  7. <学习笔记 之 JQuery 基础语法>

    jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...

  8. 简明易懂，将细节隐藏，面向新手树立web开发概念——学完Java基础语法，超快速上手springboot+mybatiJavaWeb开发

    简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...

  9. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

随机推荐

  1. [极客大挑战 2019]BabySQL 1

    考点就是一系列的sql注入操作 和 replace函数过滤 进入页面如图 ​ 基础过滤测试 union .select .information_schema试试有没有被过滤 ?username=ad ...

  2. shell编程之循环语句

    for #! /bin/sh for FRUIT in apple banana pear; do echo "I like $FRUIT" done while #! /bin/ ...

  3. hdu1045 炮台的配置 dfs

    只要炮台在同一行或者同一列,就可以互相摧毁,遇到墙则无法对墙后的炮台造成伤害,可以通过dfs搜索n*n的方格,全部搜完算一轮,计算炮台数,并保存其最大值. 其中对于t编号的炮台,位置可以计算出是(t/ ...

  4. java,jq,ajax写分页

    1.先写好html基础样式 我懒得去写css样式233,能看就行 <style> #page { width: 20px; } </style> <table> & ...

  5. python3读取excel实战

    '''参数化'''import xlrd,xlwt,jsonfrom api实现.读取参数化接口说明 import TestApiclass ReadFileData: def __init__(se ...

  6. [React]核心概念

    本文是对React文档:核心概念部分的笔记,内容大致与文档相同. 文档链接 React哲学部分写的很好,务必要看 JSX JSX是JS的语法扩展,配合react使用,为JS和HTML的混写 JSX支持 ...

  7. 使用tensorflow实现cnn进行mnist识别

    第一个CNN代码,暂时对于CNN的BP还不熟悉.但是通过这个代码对于tensorflow的运行机制有了初步的理解 ''' softmax classifier for mnist created on ...

  8. 关于获取tableView中cell数据的处理

    前言           最近在做一个项目的时候遇到了这么一个问题,就是tableview作为一个表单,每一行cell都需要填充一个数据填充完成后再返回到table页面,最后进行总的提交.   解决 ...

  9. B 火车

    时间限制 : 10000 MS   空间限制 : 565536 KB 评测说明 : 1.5s,512m 问题描述 A 国有n 个城市,城市之间有一些双向道路相连,并且城市两两之间有唯一路径.现在有火车 ...

  10. SpringBoot 使用 JSR303 自定义校验注解

    JSR303 是 Java EE 6 中的一项子规范,叫做 Bean Validation,官方参考实现是hibernate Validator,有了它,我们可以在实体类的字段上标注不同的注解实现对数 ...