zoukankan      html  css  js  c++  java
  • ajax小结

    一)回顾传统Web应用请求和响应特点
    【显示当前时间】
    1)浏览器发送请求时,会将原来页面的全部数据丢弃,等待服务端的响应结果
    2)服务端根据业务逻辑的处理情况,可能会影响速度
    3)浏览器接到响应结果后,再次重新整个页面
    即使只有一小处地方有变化,其它地方无变化,这时浏览器也需要重新全部加载
    传统方式下,浏览器的加载数据的压力会比较大,加载时间相对比较慢

    二)什么是AJAX(异步JavaScript和Xml)
    (1)同步:当一个请求发送后,必须等待刚刚那个请求的响应;只有响应完毕后,才能发送下一个请求
    请求1->响应1->请求1->响应1->... ... 单线程 WEB1.0时代 传统WEB应用 有规律
    (2)异步:当一个请求发送后,不必等待刚刚那个请求的响应,就可以发送下一个请求。
    请求1->请求2->响应1->请求3->响应2->响应3... ... 多线程 WEB2.0时代 现代WEB应用 有规律
    总之,所有请求,最终都会响应
    注意:现代WEB项目全是以1.0为主,2.0为辅。
    (3)AJAX
    就是WEB2.0时代是技术体现,所有的浏览器请求,都是以异步的方式发送到服务器。
    (4)AJAX技术体系结构
    参见<<AJAX技术体系结构.JPG>>

    三)为什么使用AJAX
    (1)减轻浏览器和服务器的发送和响应压力与提高速度时,可以使用AJAX技术
    (2)让用户休验无刷新的浏览器与服务端交互的话,可以使用AJAX技术
    (3)以异步方式提交浏览器的数据时,可以使用AJAX
    [本质]:AJAX本质是属于B/S结构的,
    效果:C/S结构。

    *四)AJAX的特点
    1)有些浏览器(例如IE)会缓存上一次发送URL请求和对应的结果,如果第二次请求与第一次一样的话,
    这类浏览器直接使用上次缓存的结果,而不会发送到服务器。 因此最好在URL请求后,加上一次时间随机数,
    以确保每次请求有不同的URL。
    2)对于GET请求,非英文和非数字,都要进行URL编码,服务端也要进行URL解码
    3)AJAX技术,只限于WEB页面(jsp,html), 与服务端技术无关。

    *五)AJAX实战
    (1)无刷新显示服务器响应的当前时间
    (2)基于HTML普通字符串,以GET和POST方式检查注册用户名是否存在
    (3)基于XML,二级下拉联动
    (4)基于JSON,二级下拉联动
    (5)基于第三方工具生成JSON,二级下拉联动

    **六)XMLHttpRequest(即:AJAX引擎)对象常用事件,方法和属性
    (1)事件:
    xhr.onreadystatechange:当AJAX引警的状态一旦改变,由系统触发,不是由程序员触发

    (2)属性:
    xhr.readyState==0:已创建AJAX引警,但未调用open()方法
    xhr.readyState==1:已调用open()方法,但未调用send()方法
    xhr.readyState==2:已调用send()方法,请求正发往服务端的路上
    xhr.readyState==3:已接收到请求,处理完毕后,正在响应浏览器
    *xhr.readyState==4:浏览器已完全彻底接收到了服务端的响应
    注意状态4,只强调了浏览器接收到了响应,但并未说明响应是正确的
    *xhr.status==200:响应完全正确
    xhr.status==404
    xhr.status==500
    xhr.status==304:服务端要求浏览器找缓存
    这些状态码与WEB状态码一样
    xhr.responseText:表示接收服务端以普通字符串响应的数据

    (3)方法:
    xhr.open(method,url,可选的boolean值)
    method表示方式请求的方式,常用的GET和POST
    url表示方送到哪个地方去,通常是Servlet&Struts2
    可选的boolean值:
    true:表示以异步的方式发送,默认
    false:表示以同步的方式发送,即又回到WEB1.0时代
    xhr.send(发送在请求体中的数据)
    如果是GET请求:请求体为null,就算带数据,服务端也不能接收到
    如果是POST请求:请求体为非null,格式:username=jack&password=123&role=admin
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    如果是POST的请求的话,一定要设置请求头,目的是让浏览器自动进行URL编码
    这句话,一定要放在open()和send()之间才有作用

    规则:如果无数据传统,才用GET请求;如果有数据传统,才用POST请求

    *七)JSON的使用
    (1)什么是JSON(JavaScript原始生态的对象)
    JSON本质是就一JS的另一种表现形式而言,JS完全可以直接操作JSON,而不需要第三方的jar包
    (2)JSON的作用
    (3)JSON的语法
    (4)使用第三方工具,将JavaBean或集合转成JSON字符串

    //-------------------------------------------------------面试题
    xhr.open(method,url,TRUE);//多线程,提倡,true小写
    xhr.send(null);
    xhr.onreadystatechange=function(){}

    xhr.open(method,url,FALSE);//单线程,false小写
    xhr.send(null);
    xhr.onreadystatechange=function(){}

  • 相关阅读:
    maquee 无缝轮播
    pascal语言中学版整理
    SPFA
    Bellman—Ford算法思想
    序列化
    random 模块 时间模块(time) sys模块 os模块
    1、正则表达式
    1、__del__ 2、item系列 3、__hash__ 4、__eq__
    小总结 面向对象
    1、面向对象内置函数 2、反射 3、内置方法
  • 原文地址:https://www.cnblogs.com/friends-wf/p/3807916.html
Copyright © 2011-2022 走看看