一、ajax 的作用:
触发某个 js 事件后,需要去操作数据库,ajax指令发送消息给后台,后台传回结果,js 在网页中显示操作数据库的结果,页面不会刷新也不会跳转。ajax 就是 JS 和后台数据库 PHP之间的桥梁。
--------------------------------------------------------------------------------------------------------------
js 发出 ajax 请求,当中会传递值给后台 =》 php 接受请求,并且接受 ajax 传来的值 =>
php执行相应功能 =》 php 将执行结果返回给 js =》 js接受结果,执行相应网页操作
-------------------------------------------------------------------------------------------------------------
调试AJAX:浏览器右键检查 =》 network
二、ajax 语句
1、声明 ajax 类型的变量
var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); }else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2、发送请求
open(method,url,async) //函数。规定请求的类型、URL 以及是否异步处理请求。 //参数: //method:请求的类型;GET 或 POST //url:文件在服务器上的位置 //async:true(异步)或 false(同步)
// get 类型的请求 xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send(); // post 类型的请求 xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send('string');//string:仅用于 POST 请求
3、响应请求
//在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。 xmlhttp.onreadystatechange=function() { //当 readyState 等于 4 且状态为 200 时,表示响应已就绪: if (xmlhttp.readyState==4 && xmlhttp.status==200) { //responseText 获得字符串形式的响应数据。 //responseXML 获得 XML 形式的响应数据。 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
三、JSON
JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。
//JSON.parse() 方法将接收到的 JSON 数据转换为 JavaScript 对象。 var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); //在向服务器发送数据时一般是字符串。 //我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。 var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"}; var myJSON = JSON.stringify(obj);