zoukankan      html  css  js  c++  java
  • ajax

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言,而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下,与服务器交换数据。这种异步交互的方式,使用户单击后,不必刷新页面也能获取新数据。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

    Ajax包括:

    • XHTML和CSS
    • 使用文档对象模型(Document Object Model)作动态显示和交互
    • 使用XML和XSLT做数据交互和操作
    • 使用XMLHttpRequest进行异步数据接收

    利用AJAX可以做:

    • 注册时,输入用户名自动检测用户是否已经存在。
    • 登陆时,提示用户名密码错误
    • 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。

     $.ajax():是jQuery中最底层的Ajax函数。参数接收一个大对象,用对象的键值对表示Ajax请求的相关设置;
     ①type:表示Ajax请求的方法,可以是get和post
     ②url:表示请求的后台URL地址
     ③success:表示请求成功的回调函数,回调函数将接收三个参数,其中第一个参数是请求成功返回的数据。
     使用数据是,需要注意返回的数据是JOSN字符串还是JSON对象。

     ④error:当请求失败时,执行的回调函数

     ⑤complete:请求完成后,无论成功失败都会调用的函数

     ⑥statusCode:接收一个对象,对象的键时各种status状态,对象的值表示每种状态码对应的回调函数。
     【常见的status状态码】
     200-请求成功;404-页面没有找到;500-服务器错误;403-访问被拒绝;

     ⑦async:设为true表示异步请求(默认),设为false表示同步请求;

     ⑧data:请求时,向后台传递的数据,是一个对象类型,以键值对的形式分别表示name:value。

     ⑨dataType:预期返回的数据类型格式。常见的json/text/html

     ⑩timeout:设置请求超时时间

     【js的同源策略】

     在js中,当请求其他文件时,要求被请求文件与当前文件,必须处于同一协议名,同一主机名、同一端口号下。
     否则,请求不能成功;如过请求非同源文件,必须进行跨域请求设置。

     .load:选中当前页面的一个DOM节点,并在当前DOM节点中加载一块html代码片段:
     接收的参数:
     ①可以是一个html文件的地址,表示将整个的html文件加载到当前区域;
     $("#div1").load("text.html");
     ②可以是一个html文件+各种选择器,表示选择该也面的指定区域进行加载
     $("#div1").load("text.html h1,#ul{
      "name":"zhangsan",
      "age":12,
      "sex":"nan",
      "haobby":[
      {
      "2":"chi",
      "3":"wan",
      "4":"dan"
      }]
    }");

    http:超文本传输协议。简单、快捷、灵活、无状态、无连接
    URL:统一资源定位符。
    组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点

    eg:http//192.158.5.123:8080/js/index.php/?name=zaha#top

    ①IP地址在同一网段是唯一的,如果是在公网中,整个公网的IP是唯一的。
    ②端口号默认是:80,可以省略不写,常见的端口号:80 Apache 8080 tomcat
    ③本机IP:localhost 或127.0.0.1


    【JSON对象与JSON字符串】
    1、JSON对象:JSON对象就是键值对的集合,键与值之间用分号分隔,多对用逗号分隔
    注意:JSON对象,要求键必须用“”包裹的字符。 ‘’无效(Java中单引号表示字符)

    2、JSON字符串:将JSON对象,用字符串的形式包裹。

    3、JSON对象与JSON字符串的相互转换
    ①对象>字符串 var str=JSON.stringify(obj);
    ②字符串>对象 var obj=JSON.parse(jsonObj);
    jQuery中字符串转对象 $.parseJSON(obj);

    4、JSON数组:将多个JSON对象组成数组形式存放,称为JSON数组。
    JSON数组可以和JSON对象相互嵌套,也就是说JSON对象的值可以是JSON数组
    var jsonArr=[
    {
    "name":"zhang",
    "hobby":[{"2":"chi","3":"kk"}]
    },{
    "name":"zhang",
    "hobby":[{"2":"chi","3":"kk"}]
    }
    ];

    $.get:在$.Ajax的基础上,进行封装,默认使用get请求。
    接收四个参数:
    ①请求的后台URl
    ②传递给后台的数据,对象类型,相当于Ajax中的data属性
    ③请求成功的回调函数,相当于Ajax中的success
    ④预期返回的数据类型,相当于Ajax中的dataType

    $.getJSON:通过get的方式,请求JSON数据


    用于检测网页中所有的Ajax的请求,执行的回调
    $(document).ajaxComplete(callback)
    $(document).ajaxError(callback)
    $(document).ajaxSend(callback)
    $(document).ajaxStart(callback)
    $(document).ajaxStop(callback)

  • 相关阅读:
    C# 枚举转换selectlistitem 及 MVC @Html.DropDownListFor() 调用详细
    C# WebRequest
    .net面试问答
    正则实现二代身份证号码验证详解
    VS2015 推荐插件
    ASP.NET MVC Areas View 引用 外部母版视图
    基于VMware Workstation搭建开发服务器
    使用ASP.NET WEB API 进行 JWT授权登录(二)
    使用ASP.NET WEB API 进行 JWT授权登录(一)
    如何五分钟完全卸载sqlserver 2012
  • 原文地址:https://www.cnblogs.com/wyu1258/p/9033501.html
Copyright © 2011-2022 走看看