zoukankan      html  css  js  c++  java
  • 深入理解ajax

    http://www.imooc.com/code/13468    基础练习

    http://www.imooc.com/video/5644             !ajax!

     

     

     常用   for   in循环    for(var x in json)

    var json = JSON.parse(str);       //把字符串解析成 JSON对象

    var json = eval("(" + str + ")");   //把括号内字符当代码运行

    var str1 = JSON.stringify(json);   //将JSON转换成字符串

    JSON.parse/eval():把它当成一段代码来看,来运行或者可以把字符串中的数组转换成真的数组;在要运行的东西里面加括号就会把它当成一个对象来看(在解析json时)  例:eval("("+json+")");

     

    ajax:读取服务器下的文件

    乱码:由于html和文件编码不一致

    作用:与服务器做交互    在不刷新界面的情况下更改页面内容

     

    异步:ture  全部刷新  有缓存

    同步: false  一个一个刷新   (默认)

    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true

     

    get:让数据在地址栏显示出来   不安全   数据量 2K     分享和调试时用get

    post:不让数据显示出来   相对安全    数据量:基本无限制

     

    *在IE下有时候会出现只有第一次读取的值正常,后面的值都不正常,是因为AJAX缓存的问题

    解决方法如下:

    1、在服务端加 header("Cache-Control: no-cache, must-revalidate");(如php中)

    2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");

    3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

    4、在 Ajax 的 URL 参数后加个随机数 如 url=url+"&"+Math.random();

    5、第五种方法和第四种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime();

    6、用POST替代GET:不推荐

    这样每次请求的url都不一样(ajax的缓存便不起作用)确保每次加载的数据是最新的。

    AJAX

     1 function ajax(method, url, data, fn, fn2) {
     2 
     3     // 1 创建http请求对象
     4 
     5     var oAjax = null;
     6 
     7     if (window.XMLHttpRequest) {
     8 
     9         oAjax = new XMLHttpRequest();  //IE7+, Firefox, Chrome, Opera, Safari
    10 
    11     } else {
    12 
    13         oAjax = new ActiveXObject("Microsoft.XMLHTTP");  // IE6, IE5
    14 
    15     }
    16 
    17     // 2 连接服务器
    18 
    19     oAjax.open(method, url + "?" + data, true);
    20 
    21     // 3 发送
    22 
    23     if (method == "post") {
    24 
    25         oAjax.send(data);
    26 
    27     } else {
    28 
    29         oAjax.send();
    30 
    31     }
    32 
    33     // 4  处理响应结果
    34 
    35     oAjax.onreadystatechange = function () {
    36 
    37         // on readystate change 当 状态值 改变 的时候发生的事件
    38 
    39         if (oAjax.readyState == 4) {
    40 
    41        //readtState:Ajax的工作状态  有5个值(0初始化,1载入,2载入完成,3解析,4完 成)
    42 
    43             if (oAjax.status == 200) { //status:服务器状态  HTTP状态码
    44 
    45                 fn(oAjax.responseText);//请求成功函数
    46 
    47                 //responseText: ajax请求返回的值就存放到这个属性下面
    48 
    49 responseXML: 解析XML shi
    50 
    51             } else {
    52 
    53                 if (fn2) {//请求失败函数
    54 
    55                     fn2();
    56 
    57                 }
    58 
    59            }
    60 
    61         }
    62 
    63     }
    64 
    65 } 

    AJAX  传网页中数据 到后台 

    防止用户重复提交

    对于ajax请求时用户体验的改善, -loading

    beforeSend()

    Complete()

  • 相关阅读:
    Sql Server数据库快照初探
    RestTemplate的exchange()方法,解决put和delete请求拿不到返回值的问题
    常用 HTTP 状态码
    RestTemplate进行访问分页PageInfo
    Java RestTemplate传递参数
    SQL-----数据库三种删除方式详解
    Mybatis异常-java.lang.IllegalArgumentException: invalid comparison:java.util.Date and java.lang.String
    SpringBoot 项目不加载 application.properties 配置文件
    git设置、查看、取消代理
    Layui:select下拉框回显
  • 原文地址:https://www.cnblogs.com/listen9436/p/10025070.html
Copyright © 2011-2022 走看看