Ajax与jQuery
Ajax
Web 2.0
为什么使用Ajax
传统Web和Ajax的差异
Ajax简介
Ajax工作流程
XMLHttpRequest
Ajax实现步骤
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> function validate() { var name = $("#name").val(); if (name == null || name == "") { $("#nameDiv").html("用户名不能为空!"); } else { //1.创建XMLHttpRequest对象 xmlHttpRequest = createXmlHttpRequest(); //2.设置回调函数 xmlHttpRequest.onreadystatechange = callBack; //3.初始化XMLHttpRequest组件 var url = "userServlet?name=" + name;//服务器端URL地址,name为用户名文本框获取的值 xmlHttpRequest.open("GET", url, true); //4.发送请求 xmlHttpRequest.send(null); /* 使用POST方式发送请求 var url = "userServlet";//服务器端URL地址 xmlHttpRequest.open("POST", url, true); xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = "name=" + name;//需要发送的数据信息,name为用户名文本框获取的值 xmlHttpRequest.send(data); */ //Ajax 回调函数 function callBack() { if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { var data = xmlHttpRequest.responseText; if (data == "true") { $("#nameDiv").html("用户名已被使用!"); } else { $("#nameDiv").html("用户名可以使用!"); } } }//end of callBack() } }//end of validate() /* *创建XMLHttpRequest对象 */ function createXmlHttpRequest() { if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器 return new XMLHttpRequest(); } else {//返回值为false时说明是老版本IE浏览器(IE5和IE6) return new ActiveXObject("Microsoft.XMLHTTP"); } } </script>
GET请求和POST请求的区别
使用jQuery实现Ajax
$.ajax()
应用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#name").blur(function() { var name = this.value; if (name == null || name == "") { $("#nameDiv").html("用户名不能为空!"); } else { $.ajax({ "url" : "userServlet", //要提交的URL路径 "type" : "GET", //发送请求的方式 "data" : "name="+name, //要发送到服务器的数据 "dataType" : "text", //指定返回的数据格式 "success" : callBack, //响应成功后要执行的代码 "error" : function() { //请求失败后要执行的代码 alert("用户名验证时出现错误,请稍后再试或与管理员联系!"); } }); //响应成功时的回调函数 function callBack(data) { if (data == "true") { $("#nameDiv").html("用户名已被使用!"); } else { $("#nameDiv").html("用户名可以使用!"); } }//end of callBack() } });//end of blur() }); </script>
JSON
定义JSON
取值
person.name;
countryArray[0];
personArray[0].name;