zoukankan      html  css  js  c++  java
  • 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现

    一、Ajax概述
    ###<1>概述

    ###<2>组成
    以XMLHttpRequest为核心,发送Ajax请求和接收处理结果
    以javascript为语言基础
    以XML/JSON作为数据的传输格式
    以HTML和CSS作为页面的渲染

    ###<3>作用
    局部刷新
    异步请求

    ###<4>作用流程
    ![](3.png)

    ###<5>实现步骤和核心的API
    1. 创建XMLHttpRequest对象(浏览器的兼容性)
    2. 调用open方法,创建一个ajax请求
    3. 设定回调函数
    onreadystatechange = 函数
    5. 接收处理结果(判断请求和响应处理的状态)
    responseText
    responseXML
    4. 调用send方法发送ajax请求

    XMLHttpRequest:ajax引擎
    open():创建Ajax请求
    注意get:可以得到缓存中的数据
    在URL后面添加唯一的标识
    open("GET","TimeServlet?id="+new Date(),true);

    注意post:添加HTTP HEAD
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    send():发送Ajax请求
    post请求时发送请求数据:k=v&k1=v2&...
    get请求时直接调用无参send()方法

    onreadystatechange:绑定Ajax请求的回调函数
    readyState属性值发生变化时,回调指定的回调函数

    readyState :Ajax请求处理的状态
    请求未初始化 : readystate = 0
    请求正在发送 : readystate = 1
    发送完毕 : readystate = 2
    响应中 : readystate = 3
    响应完成 : readystate = 4

    status :服务器处理后HTTP CODE 状态码。
    status=200 响应完成
    status=404 资源找不到
    status=500 服务器端发生错误

    responseText :封装了服务器处理的字符串结果数据
    responseXML :封装了服务器处理的XML结果数据
    服务器响应的数据类型
    String(JSON)
    XML

    # 二、JSON数据格式
    ###<1>概念
    和语言没有关系的一种数据交换格式

    实现前端和后台的数据交互

    ###<2>语法格式
    对象:{}
    对象数组:[{},{},{}]
    属性和内容:key:value , key2:value2 ,...

    ###<3>解析json数据
    在js中直接可以处理json对象

    ###<4>json转换
    客户端 :处理json对象,可以直接操作
    将json字符串转换成json对象
    var jsonObj = JSON.parse(jsonStr)
    var jsonObj = eval( "("+ jsonStr +")");

    服务器 :
    1.json对象转换成json字符串
    借助第三方的工具包
    JSONObject :将一个java对象转换成JSON对象,从JSON中获取json字符串
    JSONObject obj = JSONObject.fromObject(java对象);
    String str = obj.toString();

    JSONArray :将一个java数组对象转换成JSON数组对象,从JSON数组对象中获取json字符串
    JSONArray objArr = JSONArray.fromObject(java数组对象);
    String str = objArr.toString();

    2.json字符串转换成java对象
    借助第三方的工具包


    # 三、Jquery+Ajax
    ###<1>Jquery概念
    对JS进行封装,简化代码量,js的框架
    write less do more

    ###<2>使用步骤
    1. 下载jquery.js脚本文件,添加到web项目(jquery.js / mini-jquery.js)
    2. 在需要使用jquery的页面中,使用<script src=“url”></script>
    3. 使用jquery进行各种操作

    ###<3>实践:登陆异步用户名校验
    方式一:$.get(列数列表)

    参数列表:url,[data],[callback],[type]
    url:待载入页面的URL地址
    data:待发送 Key/value 参数。
    callback:载入成功时回调函数。
    type:返回内容格式,xml, html, script, json, text, _default。

    方式二:$.post(列数列表)

    参数列表:url,[data],[callback],[type]
    url:待载入页面的URL地址
    data:待发送 Key/value 参数。
    callback:载入成功时回调函数。
    type:返回内容格式,xml, html, script, json, text, _default。

    方式三:$.ajax(列数列表)

    参数列表:

    async:是否异步,true
    data:待发送 Key/value 参数。
    dataType:指定服务器返回的响应数据的类型。
    type:请求的方式。
    success: 响应成功后要执行的代码块,成功的回调函数
    error: 响应失败的错误页面的回调函数
    url:请求服务器的地址


    例如:
    $.ajax(
    { async:true,
    data:"username="+obj.value,
    dataType:"json",
    success:function(data){
    if(data.result==1){
    document.getElementById("span").innerHTML = "用户名可以使用";
    }else{
    document.getElementById("span").innerHTML = "用户名以存在";
    }
    },
    type:"POST",
    url:"CheckUsername",
    error:function(){
    alert("错误");
    }
    }
    );


    # 四、分页

    不忘初心,方得始终! 坚持!坚持!坚持!!
  • 相关阅读:
    运算符优先级(图表)
    VNC+SSH相关应用
    VNC常用操作及常见问题解决办法汇总
    操作系统(二): 进程与线程
    Java实现 蓝桥杯 算法提高 01背包
    Java实现 蓝桥杯 算法提高 01背包
    Java实现 蓝桥杯 算法提高 01背包
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 日期计算
  • 原文地址:https://www.cnblogs.com/sumboy/p/9058644.html
Copyright © 2011-2022 走看看