AJAX随笔2
Ajax作用: 是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端!
异步: 当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信息发送请求]!
同步: 当浏览器向服务器发送请求的时候,整个页面都会刷新!
XML:一种文件格式,现在用XML这种返回格式的数据比较少了,XML解析性能较差,而且比较消耗带宽,现在大多数都是在是使用JSON数据的返回格式!!
案例: POST请求
<script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn01"); btn.onclick=function(){ //1.创建XMLHttpRequest对象,我们使用这个对象完成Ajax请求! var xhr = new XMLHttpRequest(); //2.通过open方法设置请求参数 var method= "post"; var url = "${pageContext.request.contextPath}/AServlet"; xhr.open(method, url); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.发送请求! xhr.send("username=zhangsan&password=lisi");
//4.接收响应信息 xhr.onreadystatechange= function(){ if(xhr.readyState == 4 && xhr.status == 200 ){ var data = xhr.responseText; alert(data); } } } } </script>
案例: Get请求
<script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn01"); btn.onclick=function(){ //1.创建XMLHttpRequest对象,我们使用这个对象完成Ajax请求! var xhr = new XMLHttpRequest(); //2.通过open方法设置请求参数 var method= "get"; var url = "${pageContext.request.contextPath}/AServlet"; xhr.open(method, url); //3.发送请求! xhr.send(); //4.接收响应信息 xhr.onreadystatechange= function(){ if(xhr.readyState == 4 && xhr.status == 200 ){ var data = xhr.responseText; alert(data); } } } } </script>
JSON
JSON是JavaScript 对象表示法(JavaScript Object Notation)。
作用:JSON 是存储和交换文本信息的语法
优势:JSON 比 XML 更小、更快,更易解析。
json对象是用{}括起来的键值对结构:
1.键和值之间用:分隔
2.键值对之间用,分隔
3.键必须是字符串类型,也就是说必须用""[双引号]引起来!不能使用单引号,也不能不用引号!
4.JSON值的数据类型:
数字(整数或浮点数) 、字符串(在双引号中)、 逻辑值(true 或 false)、 数组(在方括号中)、对象(在花括号中)、null
注意点:JSON对象是用{}括起来的,而数组是用 [ ] 括起来的!
JSON对象和JSON字符串之间的相互转换:
JSON对象转换为JSON字符串:
var jsonStr = JSON.stringify(json);
JSON字符串转换为JSON对象:
var jsonObj = JSON.parse(jsonStr);
JQuery中用ajax发送get请求
<script type="text/javascript"> $(function(){ $("#btn01").click(function(){ $.get("${pageContext.request.contextPath}/AServlet?t="+Math.random(),{"name":"zhangsan","age":12},function(data){ $("#div01").html(data); }); }); }); </script>
JQuery中用ajax发送post请求
$(function(){ $("#btn01").click(function(){ var url = "${pageContext.request.contextPath}/AServlet"; var obj = {"username":"张三","password":123456}; function callback(data){ alert(data); }; var type = "text"; $.post(url,obj,callback,type); }); });