ajax/jsonlib

ajax的概述

1.ajax的概述
* 异步的js和XML

2.异步和同步
* 同步：使用表单或者超链接提交数据，采用的都是同步的方式
* 需要把表单全部提交到Servlet中，页面发生跳转，需要等待服务器端做出现相应，如果服务器端没有做出响应，需要等待，而不能做其他的事情。
* 异步：使用XMLHttpRequest对象完成异步的操作，和服务器进行数据的交互
* 不是提交整个页面，而是提交一部分的数据，获取到服务器端响应的数据，做局部刷新。如果服务器也没有响应，进行操作其他的页面内容。

3.异步的应用
* 百度的输入框
* 验证用户名是否已经存在

4.异步的方式：在服务器端可以向客户端响应什么类型的数据呢？
* text-- 字符串（在前台获取到就是字符串）
* XML-- XML格式的数据（在前台获取到是Document对象）
* json-- 特殊的字符串，有自己格式（获取到是字符串，需要使用eval函数执行一次，执行后返回的json的对象）

* 总结：响应的这些都是比较简单的内容，不是整个HTML的页面

ajax技术的开发步骤及其入门(固定5步)

----1.学习ajax掌握XMLHttpRequest对象。

* 使用异步的技术，需要使用XMLHttpRequest对象。
* 该对象封装HTTP的协议
* 也可以采用GET或者POST方式请求服务器
* 获取服务器端的响应的内容
* 响应都是字符串或者XML文档

---- 2.ajax技术开发，编写代码的步骤就是固定的。

----3.开发的入门步骤（固定的）

* 第一步：需要先获取到XMLHttpRequest对象。

直接获取: var xhr = new XMLHttpRequest();-- 支持火狐、谷歌或者IE的高版本的浏览器

兼容获取:

@H_403_114@

 
        function 
        createXMLHttpRequest(){ 
       
        try 
        { 
       
        // 如果是你是IE高版本 火狐 谷歌  
       
        return 
        new 
        XMLHttpRequest(); 
       
        }  
        catch 
        (e) { 
       
        try 
        { 
       
        // 如果是IE6的版本 
       
        return 
        new 
        ActiveXObject( 
        "Msxml2.XMLHTTP" 
        ); 
       
        }  
        catch 
        (e) { 
       
        try 
        { 
       
        // 如果是IE5.5版本 
       
        return 
        new 
        ActiveXObject( 
        "Microsoft.XMLHTTP" 
        ); 
       
        }  
        catch 
        (e) { 
       
        alert( 
        "大哥！您这是什么浏览器呀！！" 
        ); 
       
        } 
       
        } 
       
        } 
       
        }

* 第二步

* 如果第一步已经获取到了XMLHttpRequest对象了，下一步，需要连接访问服务器端资源。
* open("请求方式","请求资源的路径",boolean);
* 3个方法的含义
* 1.代表的请求的方式，常用的有GET或者POST
* 2.代表的请求资源的路径，例如：${pageContext.request.contextPath}/xxxservlet
* 3.值是boolean类型的值，如果是true，说明的异步操作，如果是false，说明是同步操作。一般情况下是true

* 第三步

* 发送请求的参数
* send(请求体的内容);
* 如果请求方式是POST请求，send方法中正常传递参数了。 xhr.send("username="+haha+"&password="+123)

* 如果请求方式是GET请求，send方法一般就不传递参数了。
* 可以使用open方法来传递参数：例如：${pageContext.request.contextPath}/xxxservlet?username=haha
* 如果GET请求，一般还不传递参数的情况下，send一般传递nullxhr.send(null);

* 第四步

* 整体的目的：接收服务器端做出的响应。但是要怎么来接收呢？
* XMLHttpRequest提供了属性，使用该属性监听XMLHttpRequest对象的状态的改变。该XMLHttpRequest对象由哪些状态
* 0-- 刚创建该对象
* 1-- 调用open方法，还没有发生请求
* 2-- 已经调用了send方法，发送了请求，但是还没有得到响应
* 3-- 做出了响应，但是有可能响应没有结束
* 4-- 响应结束了

* 代码如下

@H_403_114@

 
         xhr.onreadystatechange =  
         function 
         (){ 
        
         // 做出判断，如果xhr的对象状态已经为4了，说明响应已经结束了 
        
         // 不仅会判断状态是否为4，还会判断状态码是否为200 
        
         if 
         (xhr.readyState == 4 && xhr.status == 200){ 
        
         // 在该位置，获取到响应的内容了。 
        
         // 接收响应的代码 
        
         var 
         result = xhr.responseText; 
        
         } 
        
         };

* 第五步

* 接收响应的内容
* 如果服务器端响应的是字符串，var result = xhr.responseText;result就代表的是字符串
* 如果服务器端响应的XML的内容，var result = xhr.responseXML;result就代表的是document对象

ajax发送POST请求

1.向服务器发送的POST请求
* xhr.open("POST","地址",true)
* 设置请求的头的信息
* xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
* xhr.send(参数);

2.编写代码演示POST请求

json数据格式的概述

1.json的概述：js提供一种数据交换的数据的格式。一般的情况下，都是在后台的拼接成json数据，响应的前台。使用js代码就非常方便操作json。
2.json数据 格式的规范
* 定义json数据格式必须使用{}括起来，对外提供的方式就是对象。
* var person = {};

* 对象包含属性和值，如果是属性，必须是双引号括起来，不能使用单引号。
* var person = {"name":"张三","age":18};

* 值是类型
* null
* 数字
* 字符串
* 数组使用[]括起来
* booleantrue或者false

3.定义json的格式
* var person = {"name":"zhangsan","age":18};
* 包含属性和属性值之间使用冒号（：）
* 属性与属性之间是逗号（,）
* 获取属性的值 person.name 或者 person.age

4.完成前后台的交互
* 从后台发送json数据格式的数据。在前台使用js解析数据。

5. 从后台响应的json格式的数据，到前台使用eval函数执行一次。
* 使用eval函数全局函数，可以执行js的代码并且执行的时候拼接小括号
* 例如： var msg = eval("("+text+")");
* 必须要使用eval的函数，执行后的结果才是json对象。

**jsonlib工具类的使用**
1.作用：后台提供的工具类，可以把JavaBean转换成json数据格式。

2.导入jar包。

3.记住这两个类

* 都有一个toString()方法，把JSONObject转换字符串的json的数据格式
* JSONObject---------------------->(用于处理javabean和Map集合)
* 把该类当成Map集合来记。
* 提供的一些方法

* put(key,value)

* 静态方法：fromObject(JavaBean)传入进去，返回的JSONObject类

* JSONArray------------------------>(用于处理list和Array数组类数据)
* 把该类当成List集合来记。

* add(JavaBean)-- 返回的类似数组的json格式。

* toString()-- 把JSONArray转发字符串json数据格式

注意:如果传入的对象有引用其他对象,可能会引起死循环

解决办法:传入参数的时候,传入一个JsonConfig对象进去,这个对象扩滤掉相关的对象

@H_403_114@
1

2

3

4

5

6

7

8

9

10

//=======================解决内置死循环=============================

JsonConfig jsonConfig = new JsonConfig();

//设置不去查询的对象

jsonConfig.setExcludes( new String [] { "crmDepartment" , "crmStaffs" });

//===================================================================

String jsonString = JSONArray.fromObject(AllpostByDepId,jsonConfig).toString();

//解决中文乱码问题

ServletActionContext.getResponse().setContentType( "text/html;charset=UTF-8" );

ServletActionContext.getResponse().getWriter().write(jsonString);

4.总结
* jsonlib工具类目的，在服务器端把对象转换成json格式的字符串。
* 提供了两个类
* JSONObject
* put(key,value)
* 静态方法，fromObject(Object)
* toString()

* JSONArray
* add()
* toString()

案例代码:AJAX+JSON

1.具体代码如下

AJAX:

@H_403_114@

 
        //1.获取连接对象(固定) 
       
        function 
        createXMLHttpRequest(){ 
       
        try 
        { 
       
        // 如果是你是IE高版本 火狐 谷歌  
       
        return 
        new 
        XMLHttpRequest(); 
       
        }  
        catch 
        (e) { 
       
        try 
        { 
       
        // 如果是IE6的版本 
       
        return 
        new 
        ActiveXObject( 
        "Msxml2.XMLHTTP" 
        ); 
       
        }  
        catch 
        (e) { 
       
        try 
        { 
       
        // 如果是IE5.5版本 
       
        return 
        new 
        ActiveXObject( 
        "Microsoft.XMLHTTP" 
        ); 
       
        }  
        catch 
        (e) { 
       
        alert( 
        "大哥！您这是什么浏览器呀！！" 
        ); 
       
        } 
       
        } 
       
        } 
       
        } 
       
        function 
        changePost(aa){ 
       
        var 
        depid = aa.value; 
       
        //获取对象 
       
        var 
        res =createXMLHttpRequest(); 
       
        //连接服务器访问资源 
       
        res.open( 
        "post" 
        , 
        "${pageContext.request.contextPath}/CrmPostAction_findAllpostByDepId.action" 
        , 
        true 
        ); 
       
        // 设置请求头 
       
        res.setRequestHeader( 
        "Content-Type" 
        , 
        "application/x-www-form-urlencoded" 
        ); 
       
        //发送连接参数 
       
        res.send( 
        "crmDepartment.depId=" 
        +depid); 
       
        //接受服务器返回的状态码 
       
        res.onreadystatechange =  
        function 
        (){ 
       
        // 做出判断，如果xhr的对象状态已经为4了，说明响应已经结束了 
       
        // 不仅会判断状态是否为4，还会判断状态码是否为200 
       
        if 
        (res.readyState == 4 && res.status == 200){ 
       
        var 
        postSelect = document.getElementById( 
        "postSelectId" 
        ); 
       
        // 在该位置，获取到响应的内容了。 
       
        // 接收响应的代码 
       
        var 
        result = res.responseText; 
       
        //手动处理json数据 
       
        var 
        jsonData = eval( 
        "(" 
        +result+ 
        ")" 
        ); 
       
        // javascript 遍历json并添加数据 
       
        for 
        ( 
        var 
        i = 0 ; i < jsonData.length ; i ++){ 
       
        var 
        postObj = jsonData[i]; 
       
        postSelect.innerHTML +=  
        "<option value='" 
        +postObj.postId+ 
        "'>" 
        +postObj.postName+ 
        "</option>" 
        ; 
       
        } 
       
        } 
       
        };  
       
        }

Web层代码:

@H_403_114@

 
        function 
        searchName() { 
       
        var 
        c = document.getElementById( 
        "content" 
        ); 
       
        c.innerHTML =  
        "" 
        ; 
       
        var 
        xhr = createXMLHttpRequest(); 
       
        var 
        productName = document.getElementById( 
        "name" 
        ).value; 
       
        // 判断，如果 
       
        if 
        (productName ==  
        null 
        || productName ==  
        "" 
        ){ 
       
        return 
        ; 
       
        } 
       
        xhr.open( 
        "GET" 
        , 
        "${ pageContext.request.contextPath }/searchName?productName=" 
        +productName); 
       
        xhr.send( 
        null 
        ); 
       
        xhr.onreadystatechange =  
        function 
        (){ 
       
        if 
        (xhr.readyState == 4 && xhr.status == 200){ 
       
        // 接收值 
       
        var 
        name = xhr.responseText; 
       
        var 
        names = name.split( 
        "," 
        ); 
       
        for 
        ( 
        var 
        i=0;i<names.length;i++){ 
       
        var 
        n = names[i]; 
       
        c.innerHTML +=  
        "<div onmouSEOver='overColor(this)' onmouSEOut='outColor(this)' onclick='setValue(this.innerHTML)' >" 
        +n+ 
        "</div>" 
        ; 
       
        } 
       
        // 显示 
       
        c.style.display =  
        "block" 
        ; 
       
        } 
       
        }; 
       
        }; 
       
        function 
        overColor(div){ 
       
        div.style.backgroundColor =  
        "red" 
        ; 
       
        } 
       
        function 
        outColor(div){ 
       
        div.style.backgroundColor =  
        "white" 
        ; 
       
        } 
       
        function 
        setValue(val){ 
       
        document.getElementById( 
        "name" 
        ).value = val; 
       
        var 
        c = document.getElementById( 
        "content" 
        ); 
       
        c.style.display =  
        "none" 
        ; 
       
        }

来自为知笔记(Wiz)

原文链接：https://www.f2er.com/ajax/162826.html

**ajax的概述**

**ajax技术的开发步骤及其入门(固定5步)**

----1.学习ajax掌握XMLHttpRequest对象。

---- 2.ajax技术开发，编写代码的步骤就是固定的。

----3.开发的入门步骤（固定的）

* 第一步：需要先获取到XMLHttpRequest对象。

* 第二步

* 第三步

* 第四步

* 第五步

**ajax发送POST请求**

**json数据格式的概述**

**案例代码:AJAX+JSON**

猜你在找的Ajax相关文章

ajax的概述

ajax技术的开发步骤及其入门(固定5步)

ajax发送POST请求

json数据格式的概述

案例代码:AJAX+JSON