博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax基础
阅读量:7236 次
发布时间:2019-06-29

本文共 2586 字,大约阅读时间需要 8 分钟。

1. 什么是Ajax?

Ajax是“Asynchronous Javascript And XML(异步Javascript和XML)”的缩写, 是指一种创建交互式网页应用的网站开发技术。

Ajax不是一种新的编程语言, 而是一种用于创建更好、更快以及交互性更强的web应用程序的技术。

它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、 XHTML和CSS、DOM、XML和XMLHttpRequ。

Ajax可以在不重新加载整个页面的情况下, 与服务器交换数据。这种异步交互的方式, 使用户单击后, 不必刷新页面也能获取新数据。 使用Ajax, 用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

 

1.1  Ajax原理

通过XTML和CSS来实现页面, 表达信息。

通过浏览器的XmlHttpRequest(Ajax引擎)对象, 来向服务器发送异步请求, 并接收服务器的响应数据, 然后用javascript来操作DOM, 实现动态局部刷新。

 

1.2 Ajax的优点和不足之处。

优点:

  使用Ajax的最大优点, 就是能在不更新整个页面的前提下维护数据。

  这使得web应用程序更为迅捷地响应用户动作, 并避免了在网络上发送那些没有改变的HTML代码信息。

  1. 减轻服务器负担, 按需要获得数据。

  2. 无刷新更新页面, 减少用户的实际和心理的等待时间。

  3. 更好的用户体验。

  4. 减轻宽带的负担。

  5. 主流浏览器支持。

不足:

  1. Ajax的程序必须测试针对各个浏览器的兼容性。

  2. Ajax更新页面内容的时候并没有刷新整个页面, 因此, 网页的后退功能是失效的。

  3. 对搜索引擎支持不好。

 

1.3  Ajax实现过程

  第一步: Javascript监听浏览器网页事件(例如:点击, 提交, 更改等)。

  第二步: 由Javascrip创建Ajax引擎对象。

  第三步: 通过Ajax引擎对象发出请求。

  第四步: Ajax引擎等待并且接收服务器的响应内容

  第五步: Javascript再从“Ajax引擎对象”中获取响应内容, 并且通过DOM改变网页界面显示效果。

 

2. jQuery的load()方法

jQuery load()方法是简单但强大的AJax方法。

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

语法:

$("selector").load(URL, data, callback);

第一种情况:

$("#btn").click(function(){         //只传一个URL, 表示在id为new-projectsd的元素加载index.html  $("#new-projects").load("./index.html")})

第二种情况:

$("btn").click(function () {      // 只传一个URL, 导入的index.html文件含有多个传递参数, 类似于: index/html?name=yang&age=12      $("#new-projects").load("./index.html", {"name": "yang", "age":12}); });

第三种情况:

$("btn").click(function () {           // 如果加载成功,则会执行回调函数           $("#new-projects").load("./index.html", {"name": "yang", "age":12}, function () {               alert("load执行成功!");           });});

 

3. jQuery的getJSON方法

jQuery的Ajax中使用getJSON()方法, 异步加载JSON格式数据。 

获取服务器中的数据, 并对数据进行解析, 显示到页面中。

语法:

$,getJSON(url, [data], [callback]);

参数(url):  为请求加载json格式文件的服务器地址。

参数(data):  可选, 为请求时发送的数据。

参数(callback): 为数据请求成功后执行的函数。

$.getJSON("./data/getJSON.json", function (data) {            var str="";     //初始化保存内容变量            $.each(data, function (index, ele) {                $("ul").append("
  • "+ele.name+"
  • >") }) })

     

    4. jQuery的$.get()方法

    语法: 

     $.get(URL, callback);

     参数(URL): 必选, 规定请求的路径。

     参数(callback): 数据请求成功后执行的函数。

     作用:通过HTTP GET请求从服务器上请求数据。

    $.get("./data/getJSON.json", function (data, status) {            console.log(status);        })

     

    5. jQuery的post()方法

    语法:

    $.post(URL, data, callback);

    参数(URL): 必选, 规定请求的路径。

    参数(data): 可选, 连同请求发送的数据。

    参数(callback):可选, 数据请求成功后执行的函数。

    作用: 以POST方式向服务器发送数据, 服务器接收到数据之后, 进行处理, 并将处理结果返回页面。

    $.post("/index", {name: "zhang"}, function (data, status) {            console.log(status);        })

     

    转载于:https://www.cnblogs.com/yang-wei/p/9493566.html

    你可能感兴趣的文章
    用groovy写抓票程序
    查看>>
    设计资源推荐-20个漂亮的免费PSD图标格式
    查看>>
    学用MVC4做网站:序
    查看>>
    mysql kill操作
    查看>>
    Go Revel - i18n(国际化)
    查看>>
    MVC应用程序JsonResult()的练习
    查看>>
    VBS解析时候遇到时间
    查看>>
    Android应用公布的准备——渠道注冊与认证
    查看>>
    第四章 类加载机制
    查看>>
    字符和字符串
    查看>>
    使用Xamarin.Forms平台开发移动应用指南
    查看>>
    javascript中的链表结构
    查看>>
    微信开发-ACCESS TOKEN 过期失效解决方案
    查看>>
    某硕笔试题mysql数据库部分(较为全面)
    查看>>
    jQuery刷新包含的<jsp:include>页面
    查看>>
    领导者/追随者(Leader/Followers)模型和半同步/半异步(half-sync/half-async)模型都是常用的客户-服务器编程模型...
    查看>>
    如何选择行的第一个和最后一个值 之间间隔为5分钟
    查看>>
    4、QT分析之调试跟踪系统
    查看>>
    Vmware下Mac系统Vmware tools安装
    查看>>
    方法多种,选择随已定
    查看>>