• 关于ajax技术


    传统注册存在的弊端 :
    当我们点击注册时,会存在以下几个问题。
    首先,浏览器会销毁当前页面,如果注册失败返回的新页面所有之前
    填写的数据丢失。
    其次,如果网络通信较差,我们表单提交请求数据到服务端,而服务端
    又没有返回新的页面,此时用户处于一个等待状态(打断用户操作)。
    另外,如果注册失败。从服务端响应回来的是一个新的注册页面,网络
    传输一个页面需要消耗较多的网络资源,那么就会导致网络传输性能
    下降。

    一 什么是ajax(Asynchronous JavaScript and Xml)?
    a 翻译过来就是异步的js和xml技术。
    b 可以用来改善用户体验的技术,
    c ajax本质是利用浏览器内置的一个特殊对象,异步的向服务器发送请求,服务器
    一般只返回部分数据,浏览器接收到这些数据后,通过dom操作对当前页面进行局部
    更新。整个过程页面无刷新,不打断用户的操作。

    二 如何获取ajax对象
    function getXhr(){
    var xhr = null;
    if(wind.XMLHttpRequest){ // 非ie浏览器
    xhr = new XMLHttpRequest();
    }else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
    }
    三 ajax对象重要的五个属性

    该用户名可以使用
    该用户名已经存在

    onreadystatechange:绑定事件处理函数

    readyState:0 1 2 3 4 ,只有状态等4,说明ajax对象与服务端之间的交互结束。
    此时才可以对页面进行局部的更新。
    responseText:接收服务端响应回来的文本

    responseXML:接收服务端响应回来的xml文件。

    status :对状态码进行判断,200表示正常状态。此时我们只接收状态为200返回的
    部分数据。

    四 ajax编程步骤

    step1 获取ajax对象 var xhr = getXhr();
    step2 ajax对象向服务端发送请求
    get请求:

    step2.1 ajax对象与服务端之间建立通信连接。
    xhr.open('get','url','true/false');

    第一个参数:表示发送请求的方式。
    第二个参数:发送请求的地址 ,如果有参数需要把参数绑定在url请求
    地址上。 'checkName.do?uname='+name
    第三个参数:如果为true表示发送的是异步请求,
    如果false表示发送的是同步请求。

    step2.2 ajax对象绑定事件处理函数
    xhr.onreadystatechange=f1

    step2.3 xhr.send(null)
    发送请求到服务端,此时ajax对象会准备一个空的数据包往服务端传递。

    step3 编写服务端处理程序,接收ajax请求处理,处理完毕之后响应部分数据
    交给ajax对象。 (编写ActionServlet)

    step4 编写事件处理函数
    function f1(){

    }




    post请求:

    xhr.open('post','checkName.do',true);
    xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
    xhr.onreadystatechange=f1
    xhr.send("name="+username);


    五 解决中文乱码
    5.1 get请求乱码的原因?
    当发送get请求时,非ie浏览器使用的是utf-8编码,ie浏览器默认使用gbk编码,
    而服务端使用的是iso8859-1编码,两边编码不一致所以导致乱码产生。

    解决办法
    对于非ie浏览器发送的get请求,我们可以去修改server.xml文件添加URIEncoding="utf-8",
    默认指定服务端接收个get请求时,使用utf-8接收。

    对于ie浏览器我们可以指定发送请求参数时,使用utf-8编码,只需要给发送的url使用
    encodeURI(url);

    utf-8编码(变长编码):国际化最优编码,存储一个英文或数字,占一个字节。
    一个中文字母占三个字节。
    gbk:本地化最优编码。存储一个英文字母占一个字节。存储一个汉字占2个字节。

    服务端默认使用iso8859-1编码。一个字母占一个字节。

    5.2 post请求产生乱码的原因?
    当发送post请求时,所有浏览器默认采用utf-8编码。而我们修改server.xml文件
    指定编码URIEncoding="utf-8",只针对get请求有效。

    解决办法 :
    request.setCharacterEncoding("utf-8"); 这行代码只针对post请求有效。
    告诉服务端接收浏览器发送过来的参数使用utf-8.

    六 缓存问题 ?
    当ie浏览器发送get请求时,第一次发送请求之后,请求地址保存在浏览器缓存中。
    如果再次发送相同的请求,此时浏览器不会像服务端发送请求。而是直接从缓存中取出
    上次访问的历史记录。

    解决办法有两种?
    1 默认使用post请求。

    2 Math.random() 随机产生0~1之间随机数。
    'checkName.do?name='+username+'&'+Math.random()

    jQuery对ajax的支持
    jQuery对ajax支持有两个好处:第一我们不会像以前写原生的ajax,需要写
    一堆的模式化代码,我们只需要调用jQuery提供对ajax支持的方法即可,另外
    使用原生的ajax去进行dom操作时,会出现浏览器不兼容问题,我们现在如果使用
    jQuery,因为jQuery对dom操作封装性非常高,能够帮我们解决大部分浏览器不
    兼容的问题,这样jQuery也能够帮助我们解决了ajax浏览器不兼容性问题。

    1.load
    作用:向服务器发送异步请求,将服务器返回的数据直接添加到符合要求的节点上。
    用法:$obj.load(url[,data])
    注:url:请求地址
    data:请求参数,有两种格式:
    字符串格式 "name=tom&age=22"
    json对象格式 {"name":"tom","age":22}
    该方法如果没有参数则默认发送get请求,如果有参数默认发送POST请求
    <div> </div>
    $('div').load('')
    弊端:只能发送异步请求,不能发送同步请求。返回的数据直接填在当前的节点上,不能对返回的数据进行处理,如果返回是json格式
    的数据,显然该方法不能满足要求
    2.$.post()/$.get()
    作用:只能异步的向服务器发送请求,可以使用回调函数处理服务端返回的数据
    用法:$.get(url,[data],[callbock],type);
    注:
    url:请求地址
    data:如果有参数则写,没参数可不写,有两种格式
    字符串格式 "name=tom&age=22"
    json对象格式 {"name":"tom","age":22}
    callback:回调函数可以用来处理服务端返回的数据
    function(data,status){

    }
    其中data表示从服务端获取响应回来的内容,status是一个字符串,描述ajax对象
    接受服务端请求的状态(一般可以不写)

    type:服务端返回的数据类型,可以是以下几种:
    text:文本
    HTML:HTML文档
    json:json字符串
    xml:xml文档
    script:javascipt脚本
    3.$.ajax() 重点掌握
    作用:能够向服务端发送异步或同步请求,并且也可以使用回调函数处理服务端返回的数据
    用法:$.ajax({json格式的字符串});
    json格式的字符串参数?
    $.ajax({
    url:'请求的地址',
    type:'请求方式 post/get',
    data:请求参数{'name':username}或"name=username",
    dataType:服务器返回的数据类型(text,html,xml,json,script),
    sueccess:function(data,status){//成功接收服务端响应回来的数据
    其中data表示从服务端获取响应回来的内容,status是一个字符串,描述ajax对象
    接受服务端请求的状态(一般可以不写)
    },
    error:服务端处理失败调用的回调函数
    async:如果 不写则默认为异步请求。也可以指定,false表示为同步,true表示为异步
    })

  • 相关阅读:
    【Python】格式化输出json
    【flask】处理表单数据
    【flask】使用Flask-WTF处理表单
    【html】合并单元格,并居中显示文本
    testng失败重跑
    Maven安装以及使用
    使用extentreports美化testng报告2,增加监听
    使用extentreports美化报告
    获取在控制台输入命令后的结果
    mysql的慢查询实战+sql优化
  • 原文地址:https://www.cnblogs.com/bad-guy/p/6596368.html
Copyright © 2020-2023  润新知