ajax技术的运用

此项目的关键点在于使用ajax实现请求服务器信息

具体代码如下

<script type="text/JavaScript">

var num=2;

window.onload = function(){

 

    //当进入窗口是自动执行此方法

 

    sayHi();// 执行 sayHi（）方法，先加载第一次

 

}

function focusbody(){// 又定义一个 focusbody（）方法，

     

     setInterval('sayHi();', 1000);// 执行自动无线循环方法 1000为1秒

     }

function sayHi(){

     

 

     

//3. 创建一个XMLHttpRequest对象

     var request = new XMLHttpRequest();

     

     //4.准备发送请求数据：url

     var url= "showMsg1.jsp";// 这点是我自己想到的，中间建立一个媒介 showMsg1.jsp，让showMsg1.jsp的内容是从网页上 Java Bean 里的Linkedlist打印的聊天消息

showMsg1.jsp的内容

<%@ page language="Java" import="java.util.*" contentType="text/html" pageEncoding="GBK"%>

 

 

 

<jsp:useBean id="msgs" class="java.util.LinkedList" scope="application" /> -->

    <%

     java.util.Iterator ite= msgs.iterator();

         while(ite.hasNext()){

            out.println(ite.next());

         }

    %>

     var method="GET";// 设置请求方法为get

     

     //5.调用XMLHttpRequest 对象的open方法

     request.open(method,url);// 如上

     //6. 调用XMLHttpRequest 对象的send方法

     request.send(null);//参数为0

     //7.为XMLHttpRequest 对象添加 onreadystatechange 响应函数

     request.onreadystatechange = function(){//XMLHttpRequest对象的onreadystatechange事件，如下，一旦改变执行方法

onreadystatechange

存储函数（或函数名），每当 readyState属性改变时，就会调用该函数。

        //8. 判断响应是否完成： XMLHttpRequest 对象的readyState 属性值为4的时候

        if(request.readyState == 4){//XMLHttpRequest对象的readyState属性等于4时是响应已经完成

        //9.再判断响应是否可用 XMLHttpRequest 对象的status属性为200时

        if(request.status == 200 || request.status== 304){

//XMLHttpRequest对象的status属性等于200或304时是响应已经完成

 

        //10.打印响应结果 responseText

    document.getElementById("divbox").innerHTML =request.responseText+num;

//XMLHttpRequest对象responseText属性即接收到的值，输出在 ID为divbox的 div中

     }

        }}

     

num++;//参数而已

}

 

Ajax 不是一中新的语言，是异步的javascript 和Xml ，是指一种对网页

的某部分的刷新

什么是同步请求，什么是异步请求

同步请求（特点，请求之后，刷新了整个页面，弊端 1、刷新整个页面，极大的浪费了资源。 2、导致用户操作被中断，导致交互性差，用户体验差）

1. 向服务器请求一个html页面 2、 form 表单 3、地址栏，超链接

异步请求方式：ajax（局部更新页面的技术）

特点：多个事件并行发生，事件互不影响，请求之后，不刷新整张页面，页面不动，只刷新页面的局部

 

核心对象： XMLHttpRequest 是一个 javascript 对象，但是存在浏览器差异，简称xhr

所以，在进行编程时，需要消除浏览器差异

同步请求过程

1. 发送请求，传递参数
2. 处理响应，发送返回

异步请求过程

1. 创建XMLHttpRequest （xhr）

   Webkit核和IE 核

   Window.XMLHttpRequest *****>返回值true 是 webkit核

   False 是(IE内核)

   If（window.XMLHttpRequest）{

   // webkit 核

   Xhr = new XMLHttpRequest();

   }else{

   // IE 核

   Xhr = new ActiveXObject("Microsoft.XMLHTTP");

   }

2 发送请求传递参数

Xhr.open("method"(get||post),"url");

Xhr.send();发送请求

Get 传参数是在地址栏传递，

1. 处理响应，接受响应信息

   // xhr.readyState 是一个属性，属性不停变化

   属性值有

   1. ：xhr没有初始化
   2. ： xhr 已经初始化
   3. ：请求发送调用了send方法
   4. ：代表请求开始，返回响应（）但是不完整
   5. ：响应完成，是一个完整的响应

Xhr.onreadystatechange= function(){//监听变化，当变化时执行方法

// 404 505 等等

完整响应处理一个正确且完整和的响应 xhr.status

If(xhr.readyState==4&& xhr.status==200){

//后台一定不能有跳转页面，只认字符串

//处理响应

xhr.responseText; //接受响应结果

}

}

 

 

如何通过XMLHttpRequest请求对象或集合，然后传给前台页面，不刷新

如果是同步请求，请求一个新页面，然后放在session域中，再在当前页面中取出就好，但是ajax请求的页面不能这样做

 

一个思路，把集合打成特殊的字符串，传递给前台，然后还原集合，便利取对象

请求到的对象是java对象

需要接受后利用的是转成 jQuery对象就是 var student={属性，方法，方法套属性}；

例如 var student = {"id":21,"name":"张三","age":18};

如何拿到属性，对象名.属性名

但是如何创建集合呢？

Var students = [{"id":21,"name":"张三","age":18},{"id":22,"name":"李四","age":28}];

如何遍历

for(var i =0;i<students.length;i++){

alert(student[i].id);

alert(student[i].name);

alert(student[i].age);

}

javascript只认jquery对象，

java第三方API提供的有方法，可以把对象编程jquery对象形式的字符串

续看提示第四个 30.58

 

Fastjson 阿里巴巴的API

38.58

        user user1=new user(1,"张三",new Date());

        user user2=new user(2,"李四",new Date());

     String    JSON1=JSON.toJSONString(user1);

System.out.println(JSON1);

String JSON2=JSON.toJSONStringWithDateFormat(user1,"yyyy年MM月dd日");

System.out.println(JSON2);

List<user> users=new ArrayList<user>();

users.add(user1);

users.add(user2);

StringJSON3=JSON.toJSONStringWithDateFormat(users,"yyyy年MM月dd日");

System.out.println(JSON3);

{"dir":1479381680709,"id":1,"name":"张三"}

{"dir":"2016年11月17日","id":1,"name":"张三"}

[{"dir":"2016年11月17日","id":1,"name":"张三"},{"dir":"2016年11月17日","id":2,"name":"李四"}]

 

Ajax_day1总结

1. 什么是ajax , 异步的javascript 和 xml
2. 什么是同步请求，异步请求

   同步请求的缺点：同步请求刷新整张页面，极大浪费网络资源，导致用户的操作终端，极差的用户体验

   Ajax异步请求好处：不会刷新整张页面，刷新页面的局部

3. 重点（ajax 的GET 、 POST 的方式编程）

   Get url？传递参数

   Post

   Xhr.setRequestHeader("contend-type","application/x-ww-form-urlencoded");

   Xhr.send("参数")

4. ajax 对象的类型数据传递机制

   uesr -----Json 字符串

   String json = JSON.toJsonStringWithFormat(对象);

   //设置相应类型

   Response.setContentType("application/json;charset=utf-8");

   //前台

   Var js对象|数组 =eval("("+xhr.responseText+")");

   项目实战思路

实现思路：

1. 设置button按钮，通过javascript触发建立ajax对象
2. Xhr发送请求，接受请求。接收action响应
3. 对于action响应，将对象添加至list，list用alibaba API fastJson转成jquery字符串。
4. 接收action 的 jquery字符串，转成jquery对象
5. 遍历，操作，打印，或者显示在div

实现步骤(指导同上)我已经可以无压力实现了，就是某些东西记不得

现标记如下

jsp页面里

用js记得引用

<scripttype="text/javascript"src="js/jquery-1.7.2.js"></script>

Js书写，刚开始现全局触发$(function(){})；然后创建xhr对象是分两种情况

拼写记不住，分别是 XMMHttpRequest 和ActiveX Object("Microsoft.XMLHTTP)

1. open 时的url拼写可以用 jsp表达式，也可以用js代码获取，
2. 如果用post方式必须写头部文件 xhr.setRequestHeader("contend-type",这个是form表单的enctype属性)
3. 然后发送请求，处理响应时先触发一个事件 xhr.onreadystatechange=function(){}；

   然后还要判断 status（状态就是页面的请求状态400 404 500 什么的）正确是200，成功的状态， readyState（准备状态，是xhr的自己属性，分1 2 3 4 分别代表这个对象的请求状态）正确属性是4

4. 还原 jquery 对象是用的是jquery =eval("("+jsonString+")");方法，记得加（），
5. 对于在div 或者其他 html元素中用js填写内容，要注意，js控制的始终是最内层的元素如一个div中有一个 table ，不能往 div中通过js 写table元素，
6. 而且对于字符串拼接，里面不能出现类似于这种情况 var aa="a="a""这种，要么转义，要么不加""

javaAction页面里

1. 方法返回是null
2. HttpServletResponse response = ServletActionContext.getResponse();

   response.setContentType("application/json;charset=utf-8");

       PrintWriter writer = response.getWriter();

   不熟练

Struts.xlm页面里

1、    <packagename="user"extends="struts-default"namespace="/user">包名是/user是链接地址

2、<actionname="jqueryAction"class="zwl.jquery.jqueryAction"method="queryAll"/>

Name 是链接中的方法，对应的是method中的方法

重写struts后要重启tomcat

ajax2am1.lxe

两个好用的快捷键

Ctrl+shift+L 快捷键功能提示

Alt+shift+LEclipse自动生成返回值对象的快捷键

 

其他转json API Gson 和 Jackson

 

对象转json 的回环现象

双向关联

User里面有oder，oder里有user，

例如 toString 时， user的toString里有order的，会跳转到order中，order又有user，又会回来，无限循环，栈溢出

Fastjson 自动规避回环现象

 

Jquery框架对ajax的封装

 

$.ajax({

Type:"GET|POST",

url:"请求路径",

data:"username=zhangsan&password=123"或者{"username":"zhangsan","password":"123"}, (对象的形式)

success:function(data){

// data相当于 xhr.responseText

}

});

 

用jquery框架可以这样简写

<scripttype="text/javascript">

    $(function() {

        //给用户名文本绑定失去焦点事件

 

        $("#btn").click(function() {

            //获取用户输入的用户名

             varusername=$("#username").val();

            varpassword=$("#password").val();

            //使用jquery框架的ajax方法

         $.ajax({

        //设置请求类型 xhr.open(method,url)

         type:"GET",

        //设置请求地址 xhr.open(method,url)

url:"${pageContext.request.contextPath}/user/checkUserName",

            //设置请求参数可以是是对象，也可以是字符串拼接的形式

        //data:"username="+username,

        // data:{"username":username},

         data:{username:username,password:password},

        //以上三种都可以

        

        /* success就相当于成功返回的方法自动写了onreadystatechange=function()和

if(xhr.readyState==4 && xhr.status==200){

res是形参，可以是任何名字相当于 xhr.responseText

*/         success:function(res){

         alert(res);

         //$("#usernameMessage").html(res);

         }

         

         });

        

        });

 

    });

</script>

 

单独的get请求

    $("#btn").click(function() {

     

                $.get("<%=basePath%>user/jqueryAction",function(data){

                for(vari=0;i<data.length;i++){

                alert(data[i].id+" "+data[i].name+" "+data[i].dir);

                }

                },"JSON");

        

        });

 

});