zoukankan      html  css  js  c++  java
  • Ajax基础

    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("<li>"+ele.name+"</li>>")
                })
            })

    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);
            })    
  • 相关阅读:
    HttpWatch--time chart分析
    HttpWatch--简介及使用技巧
    HTTP 方法:GET 对比 POST
    各个浏览器/服务器URL最大长度限制
    DB2 SQL方式查看版本
    PowerDesign 使用 用户自定义字段类型 domain 后 生成物理模型图 生成的sql脚本 类型 替换问题
    cordova添加android平台时选择安装版本: requirements check failed for jdk 1.8
    java was started but returned exit code=1
    java pdf 导出方案
    nginx tomcat https配置方案
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9493566.html
Copyright © 2011-2022 走看看