JavaWeb基础知识day15——Ajax技术介绍

案例1-使用原生的ajax判断用户名是否占用(了解)
需求:
   当我们在注册页面上输入用户名之后,点击下一个地方,去数据库中查询有无该用户名,最后提示信息
技术分析:
   ajax
ajax
   异步JavaScript和XML,
   AJAX 是一种用于创建快速动态网页的技术。
   通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
   传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
/////////////////
ajax入门程序:
   步骤:
       1.创建一个核心对象 XMLHttpRequest
           xmlhttp = null;
           if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc.
               xmlhttp = new XMLHttpRequest();
           } else if (window.ActiveXObject) {// code for IE6, IE5
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
           }
       2.编写一个回调函数
           xmlhttp.onreadystatechange=function(){
               函数体;
           }
       3.编写请求方式和请求的路径(open操作)
           xmlhttp.open("post/get",url);
       4.发送请求(send操作)
           xmlhttp.send();
ajax-api详解
常用属性:
   onreadystatechange:检测readyState状态改变的时候
   readyState:ajax核心对象的状态
       0:核心对象创建
       1:调用了open方法
       2:调用了send方法
       3:部分响应已经生成(没有意思)
       4:响应已经完成(使用的是这个状态)
   status:状态码
       if(xmlhttp.readyState==4 && xmlhttp.status==200){
       }
   responseText:响应回来的文本


常用方法:
   open("请求方式","请求路径"[,"是否异步"]):设置请求的方式和请求的路径
   send(["参数"]):发送请求参数是请求方式为post的时候的参数
   setRequestHeader("content-type","form表单enctype属性"):设置post请求的参数的类型必须放在send方法之前.
///////////////////////////////////////////////////////////////////////////////////////////
案例2-使用jquery的ajax判断用户是否被占用
技术分析:
   jquery中的ajax
///////////////////////////
四种:
   了解:jquery对象.load(url,params,function(数据){});
   ★: $.get(url,params,function(数据){},type);
       发送get请求的ajax
           url:请求的路径
           params:请求的参数参数为key\value的形式 key=value {"":"","":""}
           fn:回调函数参数就是服务器发送回来的数据
           type:返回内容格式，xml, html, script, json, text, _default。以后用"json"

   ★: $.post(url,params,function(数据){},type);
       发送post请求的ajax

       若结果为json格式, 打印返回值的时候是一个对象
           例如若json为 {"result":"success","msg":"成功"}
           获取msg 只需要   参数.msg
   理解:
       $.ajax([选项]);
           选项的可选值:
               url:请求路径
               type:请求方法
               data:发送到服务器的数据
               success:fn 成功以后的回调
               error:fn 异常之后的回调
               dataType:返回内容格式经常使用json
               async:设置是否是异步请求
           例如:
               $.ajax({
                   url:"/day15/demo1",
                   type:"post",
                   data:"username=tom",
                   success:function(d){
                       alert(d.msg);
                   },
                   error:function(){},
                   dataType:"json"

               });

//////////////////////
步骤分析:
   将js原生ajax修改成jquery的ajax
////////////////////////////////
案例3-模仿百度搜索
需求:
   在一个文本框中输入一段内容,keyup的时候发送一个ajax请求,去数据库中查找相应的内容,在页面上展示
步骤分析:
   1.表
       create table keyword(
           id int primary key auto_increment,
           kw varchar(20)
       );
   2.页面
   3.在文本框输入内容 keyup的时候发送ajax请求将输入值传递到后台
   4.将返回的数据展示
///////////////////////////////////////
案例4-省市联动
需求:
   先有一个省份的下拉选,根据选择省份,从而动态的市下拉选中加载所有的市.
步骤分析:
   1.表
   2.页面上有两个下拉选省份的下拉选一般是固定的页面加载的时候读取所有的省份
   3.当省份改变的时候,获取省份的信息,发送一个ajax请求,去市的表中查询相应省份的所有市,然后将他们加载到市下拉选上
   4.selectProServlet selectCityServlet
   //////////////////////
技术分析:
   json
       JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。
   json格式:
       格式1:value可以为任意值
           {"key":value,"key1":value1}
       格式2:e可以为任意值
           [e1,e2]
   jsonlib工具类,可以使对象转换成json数据
       1.导入jar包
       2.使用api
           JSONArray.fromObject(对象) 数组和list
           JSONObject.fromObject(对象) bean和map

JavaWeb基础知识day15——Ajax技术介绍

猜你喜欢