17.12.10，web学习第二十二天，还有一年，努力吧青年Ajax

js原生Ajax和jQ的Ajax

1. Ajax概述：同步和异步现象：

同步：客户端发送请求并等待服务器响应，这段时间客户端处于 卡死状态。

异步：不管服务器响应还是不响应，客户端都不会卡死。

2. Ajax运行原理：

页面发起请求，会将请求发给浏览器内部的Ajax引擎。Ajax引擎 会将请求发给服务器端。服务器将数据返回给Ajax引擎后会出 发设置的事件，从而执行js显示页面的某些功能。

3. JS可以动态修改内存当中的html代码。F12看到的是内存中的代码。

4. 服务器不知道客户端是传统请求方式还是Ajax所以乱码问题该怎么解决还是怎么解决。

5. Js原生Ajax的Post请求带参数需要设置？

6. Js原生ajax了解即可。需要知道哪些东西：

客户端通过ajax引擎访问的服务器。

响应时是响应给引擎。

7. json常见的两个作用：是一种与语言无关的数据交换格式。

使用ajax进行前后的数据交换

移动端与服务器端的数据交换

8. Json的数据格式：（重点）

有两种格式可以互相嵌套。

Json的键是字符串，值是object

Json是js原生的内容！！！

对象格式：{“”:obj,””:obj}

数组格式：[obj,obj,obj....]

例：<script type="text/javascript">/** * 案例三 * { *   "param":[{key:value,key:value},{key:value,key:value}] * } *   *   */ var p={"param":[         {"":"","":""},         {"":"","":""}         ]  }  alert(p.param[].)</script>

记住jQ中juery和$是一样的！！！9. jQ的Ajax技术（重点）

Jq里面的参数[]代表可选参数。

有时候程序出错可能是jq引入出错通过弹窗辨别。

通过Ajax提交get和post地址栏均相同都不会显示参数。

Jq的乱码问题：post不会出现乱码，get使用编解码的方式。

Jq对js原生的ajax进行了封装，常用api如下：

$.get(url,[data],[callback],[type])

$.post(url,[data],[callback],[type])

其中，url代表请求的服务器地址。

data是请求服务器端的数据（可以是字符串也可以是json格式）

callback表示服务器端成功返回后执行的函数

Type表示服务器端传回的数据类型（jquery会根据指定的类型自动类型转 换）常用的有html，text，json。

服务器端拼接json时例：’’ 需转义\’’  {“\ “1\”:\”1\”,\”2\”:\”2\” “} 

使用Ajax访问时，如果不给出[callback]函数，即使服务器返回结 果也看不到，因为谁请求服务器就将数据返回给谁！

Get和post大致相似。但post服务器乱码问题底层已经解决，不 需要手动解决。

服务器返回中文乱码解决： response.setContexnttype(“text:html;charset=UTF-8”);

Jq文档中方法只要是$开头都是全局方法。

$.ajax(Url:xxx,Async:true,Type:”post”,Data:,Success:function(data){},Error:function(){},dataType:”json”);

例子：<script src="js/jquery-1.11.0.min.js" ></script><script type="text/javascript">window.onload=function(){$.get("demo",function(data){alert(data)});};</script>

10. 异步校验用户名是否存在

Js和jq对象绑定事件不同在于js的属性变成了jq的方法并把on去掉了。Js对象变jq对象穿外套，jq对象使用js的方法$(this)[0]。

给表单添加onbulr事件，异步校验是否数据库内有此名字并返回 给出提示！

主要查看jq代码不是很熟！！！！

jq获取文本框中的值

HTML 代码:<input type="text" value="some text"/>Jsp：</style><script type="text/javascript">$(function(){$("#username").blur(function(){var text= $(this).val();$.post("checkName",{"text":text},function(data){alert(data);var i=data.p;var info="";alert(i);if(i){info="该姓名可用！";$("#sps").css("color","red");}else{info="该姓名已被注册！";$("#sps").css("color","green");}$("#sps").html(info);},"json");});});</script>Web：public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String text = request.getParameter("text");try {int i = Service.checkName(text);boolean is=false;if (i>0) {is=false;} else {is=true;}response.getWriter().write("{\"p\":"+is+"}");} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}Service：public static int checkName(String text) throws SQLException {return Dao.checkName(text);}Dao：public static int checkName(String text) throws SQLException {DataSource cpds = new ComboPooledDataSource();QueryRunner qr = new QueryRunner(cpds);String sql="select count(*) from user where username=?";Long l = (Long) qr.query(sql, new ScalarHandler(), text);int ll = l.intValue();return ll;}

11. 站内查询：

distinct 模糊

使用工具jsonLib转换json格式：如果是单个对象转换成json对 象使用JSONObject类。如果是集合则使用JSONArray。

JSONArray fo=JSONArray.fromObject(x);

String string=fo.toString();

使用工具Gson：Gson gson=new Gson();

String json=gson.toJson(x);

respnse.setContentTYpe(“text/html;charste=UTF-8”)

response.getWriter().write(json);

框的回显排版：（难点！）

Jsp;

 

完善它：

1）鼠标离开下拉框消失：首先让这个框隐藏？

$("#showDiv").css("display","none");

2）向下选中深色条。给遍历的每一项加onmouseover和onmouseout事件，使用css给出background颜色。

<script type="text/javascript"> function overs(obj){$(obj).css("background","#f6b29f");}function outs(obj){$(obj).css("background","#fff");}function clicks(){var count="";var ids=$("#search").val();$.post("distinctSearch",{"name":ids},function(data){for (var i = 0; i < data.length; i++) {count+="<div onmouseover='overs(this)' onmouseout='outs(this)'>"+data[i]+"</div>";}$("#showDiv").html(count)},"json");};</script>

3) 点击显示框内部的条目使其添加到输入框中且关闭选择框。

$(“#?”).html();啥意思？html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数，则返回被选元素的当前内容。

记住input的内容通过val()属性获得和设置！！

返回设置属性值！

val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

 

给每一个条目加一个点击事件，

效果

function clickss(obj){

$("#search").val($(obj).html());

$("#showDiv").css("display","none");

}

 

今日站内查询所有代码（不完整）：

Jsp：<form class="navbar-form navbar-right" role="search"><div class="form-group" style="position:relative"><input id="search" type="text" class="form-control" placeholder="Search"  ><div id="showDiv" style="position:absolute;z-index:1000;background:#fff; width:179px;  border:1px solid #ccc;"></div></div><button type="button" class="btn btn-default" id="t" onclick="clicks()">Submit</button></form><script type="text/javascript"> function overs(obj){$(obj).css("background","#f6b29f");}function outs(obj){$(obj).css("background","#fff");}function clickss(obj){$("#search").val($(obj).html());$("#showDiv").css("display","none");}function clicks(){var count="";var ids=$("#search").val();$.post("distinctSearch",{"name":ids},function(data){for (var i = 0; i < data.length; i++) {count+="<div onclick='clickss(this)' onmouseover='overs(this)' onmouseout='outs(this)'>"+data[i]+"</div>";}$("#showDiv").html(count)},"json");};</script>Web：public class distinctSearch extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String parameter = request.getParameter("name");System.out.println(parameter);List<Object> ds = Service.distinctSearch(parameter);//封装成json类型response.setContentType("text/html;charset=UTF-8");JSONArray fo = JSONArray.fromObject(ds);String string = fo.toString();System.out.println(string);response.getWriter().write(string);}Service：public static List<Object> distinctSearch(String parameter) {return Dao.distinctSearch(parameter);}Dao：public static List<Object> distinctSearch(String parameter) {DataSource ds=new ComboPooledDataSource();QueryRunner qr = new QueryRunner(ds);String sql="select * from product where pname like ? limit 0,8";try {query = qr.query(sql, new ColumnListHandler("pname"), "%"+parameter+"%");} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}//for (Object jbs : query) {//System.out.println(jbs);//}return query;}

总结：js原生Ajax所用异步访问都是ajax引擎

1）jsonlib

2）Gson：google

3）fastjson：阿里巴