来简单聊聊原生ajax和json

What is AJAX（asynchronous javascript and xml）

是一种用来改善用户体验的技术，其本质是利用浏览器内置的特殊对象（XMLHttpRequest，也就是Ajax对象），向服务器发送异步请求，服务器返回部分数据（一般不会是整个页面），浏览器利用这些数据对页面作部分更新，整个访问服务器的过程没有存在月面的刷新，不会打断用户的操做

异步请求：发送请求的同时，流浪其不会销毁当前页面，用户仍然能够对当前页面作其余操做

如何得到ajax对象

兼容性问题：

• ie使用的是ActiveXObject
  

• 其余浏览器是XMLHttpRequest
  这里就有兼容性问题，对于不一样的浏览器有不一样的解决办法，底层的解决办法是：
  

  function getxhr() { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }

ajax对象的属性

• onReadyStateChange
  用来绑定一个事件处理函数，用来处理readyStateChange事件
  当ajax对象中的readyState属性值发生从0到1的改变的时候，就会产生readystatechange事件
  
• readyState
  有五个值（0，1，2，3，4）
  表示ajax对象和服务器通讯的状态
  若是值为4的时候，表示ajax对象已经获取了服务器返回的全部数据
  这个事件事件处理函数就能够从对象中读取数据
• responseText
  返回的对象中的文本数据
• responseXML
  返回的对象中的xml数据
• status
  得到状态码
  500服务器出错
  200服务器正常
  404请求路径没法找到
  302重定向
  

编程步骤

获取ajax对象

例如:
var xhr = getXhr();

发生请求

• 发送get请求
  

---

1. xhr.open("get","check_uname.do?uname=tom&age=18", true);
   
   第一个参数是请求方式
   第二个参数是请求地址
   第三个参数是是否发送异步请求，通常都是true
   若是是false，发送请求的时候，页面不会消失，但是浏览器会锁定当前页面，用户不可以对当前页面作其余操做
   
   

2. xhr.onreadystatechange=function1;
   绑定一个事件，在状态转换的时候会调用这个函数

3. xhr.send(null);

---

• 发送post请求
  

---

xhr.open("post", "get_luckyNum.do", true);
复制代码

三个参数和get差很少同样，不过在请求地址中，再也不加入参数，这个参数会加载在最后的send里面

xhr.send("name=mackyhuang");
复制代码

这是第一个不一样点
而后须要加上一个请求头
（按照http协议，若是发送的是post请求，那么在请求数据包中应该带有conntent-type请求头）默认状况下，ajax不会带有请求头，因此须要

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
复制代码

---

编写服务器端的程序

一般不须要返回完整的页面，只须要返回部分数据

编写function1()；

就是那个事件处理函数

function function1()
{
	//获取服务器返回的数据
	if(xhr.readyState == 4  && xhr.status == 200)
	{
		var txt = xhr.responseText();
		用txt的文件修改页面内容
	}
    	
}
复制代码

整个的基本代码

设置响应函数

<input id="username" type="text" name="username" onblur="check_name();">
复制代码

get请求方式函数具体代码

function check_name() {
        var username = document.getElementById("username").value;
        var msg = document.getElementById("msg");
        var xhr = getxhr();
        xhr.open("get", "check_login.do?username=" + username, true);
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200)
            {
                var txt = xhr.responseText;
                msg.innerHTML = txt;
            }
        };
        xhr.send(null);
    }
复制代码

####post请求方式函数具体代码

function get_num()
    {
        var pLable = document.getElementById("lucky");
        var xhr = getxhr();
        xhr.open("post", "get_luckyNum.do", true);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200)
        {
            var txt = xhr.responseText;
            pLable.innerHTML = txt;
        }
    };
        xhr.send("name=mackyhuang");
    }
复制代码

缓存问题

在使用ie浏览器发送get方式给ajax请求的时候，会有缓存问题 ，即只有第一次点击有效，接下来的每一次点击都没有响应 ，由于ie会判断请求地址是否访问过，若是访问过就会调用上次访问的结果来显示。
解决方式是在请求地址后方加上？随机数

编码问题

get提交方式，ie浏览器的ajax的编码的gbk， 其余浏览器的编码是utf-8，在服务器端的编码是iso-8859-1

• 在配置文件中配置URLEncoding=utf-8
• 而后使用javascript的内置函数EncodeURL，使其编码为utf-8，这个时候全部浏览器都会用utf-8来编码

post提交方式，全部浏览器的编码是utf-8，在服务器端的编码是iso-8859-1

• request.setCharacterEncoding("utf-8");

what is Json

是一种轻量级的数据交换格式 相对于xml来讲，是轻量级的，解析速度更快，文档更小

语法

• {"":"","":""} 这里必须须要双引号
• 属性值能够是stirng number null object true/false
• 若是属性值是string,就必需要双引号

在服务器把对象转换成json

• 须要一个包 json-lib

  JSONObject jsonObject = JSONObject.fromObject(people);
    return jsonObject.toString();
    JSONArray jsonObject = JSONArray.fromObject(arrayList);
    return jsonObject.toString();
  复制代码

包中的类 JSONObject 和 JSONArray， 分别是须要生成单个json，和json数组

浏览器把json转换成对象

• javascripe的内置对象JSON,须要他的一个方法，parse():

  var object = JSON.parse(jsonString);
  复制代码

jQuery 对 Ajax 的支持

$.ajax({})

{}是一个对象，里面的属性：

• url 请求地址
• data 请求参数
• type 请求类型
• dataType 返回的值的类型
• success 服务器返回成功的事件处理函数
• error 服务器返回异常的事件处理函数

编写一个ajax，每五秒返回八个数据到页面上面

表示层代码：

<script type="text/javascript">
	
		$(function(){
			setInterval(do_query, 5000);
		});
		
		function do_query()
		{
			$("#tb1").empty();
			$.ajax({
				"url":"query.do",
				"type":"post",
				"dataType":"json",
				"success":function(books){
					$("#tb1").empty();
					//alert(books);
					for(var i = 0; i < books.length; i++)
					{
						var book = books[i];
						$("#tb1").append("<tr><td>" + book.name + "</td><td>" 
								+ book.price + "</td><td>" + 
								book.page + "</td></tr>");
					}
				}
			})
		}
	</script>
复制代码

服务器代码

response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");
    String path = request.getRequestURI();
    String action = path.substring(path.lastIndexOf("/"), path.lastIndexOf("."));
    System.out.println(action);
    PrintWriter printWriter = response.getWriter();
    if("/query".equals(action))
    {
        ArrayList<Book> books = new ArrayList<Book>();
        Random random = new Random();
        for(int i = 0; i < 8; i++)
        {
            books.add(new Book("Java企业级应用开发" + random.nextInt(8888), 
                    88, 189 + random.nextInt(8888)));
        }
        JSONArray jsonArray = JSONArray.fromObject(books);
        String json = jsonArray.toString();
        System.out.println(json);
        printWriter.print(json);
    }
复制代码

load

这是一个轻量级的ajax请求函数，
使用状况是，须要直接将返回的参数添加到一个标签上面的时候

在服务器端编写代码，而后在jsp中

$("#lucky").load("get_luckyNum.do");
复制代码

博文是做者本来在其余平台的，现迁移过来