Ajax

使用Ajax流程:

ajax:异步的javascript和xml,原理:使用XML,实现局部刷新

认识AJAX

    使用流程

        1.创建ajax引擎对象

        2.声明事件监听:监听ajax对象的属性readystate的值,一旦readystate的值发生改变就会触发监听事件的执行

    ajax的状态码之readystate的值:

        0:表示ajax引擎对象创建

        1:表示请求创建但是未发送 ajax.open("get","myservlet");

        2:请求发送

        3:请求才处理完毕,正在接收响应内容

        4:响应内容接收完完毕(重要状态)

    ajax的响应状态码:ajax.status

        200:表示一切正常

        500:资源未找到

        404:服务器内部错误

获得响应
响应状态

    ajax之响应数据:服务器响应给浏览器的数据应该是字符串类型,但是如果数据量比较大,我们就需要在服务器端将数据拼接成一个良好格式的字符串数据响应给浏览器,浏览器根据格式进行数据的解析和使用

  3.创建并发送ajax请求

发送请求

    a、创建ajax请求(设置异步或者同步)

        ajax.open(method,url,ansyc)

        method:请求方式

        get方式:请求数据以?隔开的形式拼接在url的后面,请求数据不能写在send方法中

        post方式:post方式需要单独的进行请求数据的设置,使用ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");设置请求数据为键值对方式,如有请求数据使用ajax.send("键值对数据"&"键值对数据"...),如果没有直接写ajax.send(null)

        url:请求地址

        ansyc:设置异步(true)或则同步(false),默认异步

        异步:当前js函数继续执行,无需等待ajax请求的响应以及响应的处理

        同步:当前js函数继续执行,等待ajax请求以及响应,当ajax响应处理完毕后,继续执行函数的其他代码

     b、发送ajax请求

使用流程
代码示例

二、ajax同步异步:

  1.同步的好处:

    a、同步流程对结果处理通常更为简单,可以就近处理。

    b、同步流程对结果的处理始终和前文保持在一个上下文内。

    c、同步流程可以很容易捕获、处理异常。

    d、同步流程是最天然的控制过程顺序执行的方式。

  2.异步的好处:

    a、异步流程可以立即给调用方返回初步的结果。

    b、异步流程可以延迟给调用方最终的结果数据,在此期间可以做更多额外的工作,例如结果记录等等。

    c、异步流程在执行的过程中,可以释放占用的线程等资源,避免阻塞,等到结果产生再重新获取线程处理。

    d、异步流程可以等多次调用的结果出来后,再统一返回一次结果集合,提高响应效率。

  3.同步异步的实现方式:ajax.open(请求方式,url,同步异步(false/true));


三、JSON:JavaScript 对象表示法(JavaScript Object Notation)

认识JSON

  1.json就是js创建对象的一种格式,保证对象数据的紧密型和完整性,格式:var 对象名={键名:值,键名:值,...键名:值}

json声明与格式1
json声明与格式2

  2.使用:在服务器端将要响应的数据拼接成json格式的字符,这样客户端(浏览器端)在接收到响应数据后可以使用eval方法将json格式的字符串数据直接转换为对应的js对象,便于数据的操作,

使用Gson进行转换

  我们可以在服务器端使用类似Gson的工具包完成json格式字符串的拼接

json格式

四、ajax封装:在使用ajax进行业务处理时,ajax的代码很多地方都是相同的,我们可以封装代码,提高开发效率

    实现:相同的保留,不同的传参

    请求方式:method

    请求地址:url

    请求参数:data请求参数的格式为键值对格式的字符串,不同的键值对使用&符号隔开,如果没有请求数据传入null

    异步同步设置:ansyc

    响应处理参数:deal200,该参数接收一个js的函数对象,函数对象中声明ajax响应数据的处理逻辑代码

注意:函数对象需要声明一个形参用来接收要处理的响应数据

ajax封装

五、JQuery中的ajax学习

    jquery是js的一个轻量型框架,已经将js创建的操作进行了封装,而ajax也是js的异步分,所以JQuery也已经将ajax进行了封装

    三种常用封装:

    $.get(url,data,callback)

    url:请求地址

    data:请求参数,参数格式为json对象

    callback:回调函数,注意函数要声明一个形参,用来接收响应数据

    $.post(url,data,callback)

$.get/post方式:

$.get/post方式

    $.ajax({json格式参数})方式:

$.ajax({json格式参数})方式

结果:

存在
可用

六、三级联动案例

Ajax案例之三级联动:

     功能需求:

        1.页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框

        2.选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中

        3.出现对应的该市下面的区/县信息

     技术分析:

         ajax技术+jsp+servlet+jdbc

     需求分析(思路):

         1、创建页面:页面中有三个下拉框,分别为省、市、区/县

         2、页面加载成功发起ajax请求,请求省的信息,并将响应结果

          填充到省下拉框中

         3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求

          请求该省下的市信息,并将响应数据填充到市下拉框

         4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求,请求该市下的区/县信息,并将数据填充到区/县下拉框中

     数据库设计

         创建表(area):存储了省、市、区/县信息

         设计表实现一:只存储了数据,但是数据之间的层级关系没有存储。

             地区id:areaid

             地区名:areaname

     设计表实现二:

         地区id:areaid

         地区名:areaname

         地区上级id:parentid

     数据库实现:将资料中提供的area.sql文件导入到数据库中即可(或百度sql文件)

     功能实现:参照源码即可

数据库设计示例

具体代码:

实体类:

实体类

Dao层与实现类:

Dao层
Dao层实现类

Service层与实现类

业务层接口
业务层实现类

Servlet:

servlet

Jsp页面:

jsp页面

三级联动效果:

效果
效果2
效果3
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,904评论 1 32
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,169评论 0 3
  • 一、简历准备 1、个人技能 (1)自定义控件、UI设计、常用动画特效 自定义控件 ①为什么要自定义控件? Andr...
    lucas777阅读 10,648评论 2 54
  • 五十三:请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 3,770评论 0 2
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,706评论 0 7

友情链接更多精彩内容