前面的话
虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时，传递JSON已经成为事实上的标准。因为相较于XML而言，JSON简单且方便。本文将上一篇中的实例进行改写，以JSON的方式来进行数据传递
前端页面
<!-- 前端页面 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{font-size: 20px;margin: 0;line-height: 1.5;}select,button,input{font-size: 20px;line-height: 1.5;}</style></head><body><h2>员工查询</h2> ???<label>请输入员工编号:</label><input type="text" id="keyword"><button id="search">查询</button><p id="searchResult"></p><h2>员工创建</h2><form id="postForm"> ???<label>请输入员工姓名：</label> ???<input type="text" name="name"><br> ???<label>请输入员工编号：</label> ???<input type="text" name="number"><br> ???<label>请输入员工性别：</label> ???<select name="sex"> ???<option value="男">男</option> ???<option value="女">女</option> ???</select><br> ???<label>请输入员工职位：</label> ???<input type="text" name="job"><br> ???<button id="save" type="button">保存</button> ???</form><p id="createResult"></p><script>/*get*///查询var oSearch = document.getElementById(‘search‘);//get方式添加数据function addURLParam(url,name,value){ ???url += (url.indexOf("?") == -1 ? "?" : "&"); ???url +=encodeURIComponent(name) + "=" + encodeURIComponent(value); ???return url;}oSearch.onclick = function(){ ???//创建xhr对象 ???var xhr; ???if(window.XMLHttpRequest){ ???????xhr = new XMLHttpRequest(); ???}else{ ???????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); ???} ???//异步接受响应 ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState == 4){ ???????????if(xhr.status == 200){ ???????????????//实际操作 ???????????????var data = JSON.parse(xhr.responseText); ???????????????if(data.success){ ???????????????????document.getElementById(‘searchResult‘).innerHTML = data.msg; ???????????????}else{ ???????????????????document.getElementById(‘searchResult‘).innerHTML = ‘出现错误：‘ +data.msg; ???????????????} ???????????????????????????}else{ ???????????????alert(‘发生错误：‘ + xhr.status); ???????????} ???????} ???} ???//发送请求 ???var url = ‘service.php‘; ???url = addURLParam(url,‘number‘,document.getElementById(‘keyword‘).value); ???xhr.open(‘get‘,url,true); ???xhr.send();}/*post*///创建var oSave = document.getElementById(‘save‘);//post方式添加数据function serialize(form){ ???????????var parts = [],field = null,i,len,j,optLen,option,optValue; ???for (i=0, len=form.elements.length; i < len; i++){ ???????field = form.elements[i]; ???????switch(field.type){ ???????????case "select-one": ???????????case "select-multiple": ???????????????if (field.name.length){ ???????????????????for (j=0, optLen = field.options.length; j < optLen; j++){ ???????????????????????option = field.options[j]; ???????????????????????if (option.selected){ ???????????????????????????optValue = ""; ???????????????????????????if (option.hasAttribute){ ???????????????????????????????optValue = (option.hasAttribute("value") ? option.value : option.text); ???????????????????????????} else { ???????????????????????????????optValue = (option.attributes["value"].specified ? option.value : option.text); ???????????????????????????} ???????????????????????????parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue)); ???????????????????????} ???????????????????} ???????????????} ???????????????break; ?????????????????????????case undefined: ????//fieldset ???????????case "file": ???????//file input ???????????case "submit": ?????//submit button ???????????case "reset": ??????//reset button ???????????case "button": ?????//custom button ???????????????break; ???????????????????????????case "radio": ??????//radio button ???????????case "checkbox": ???//checkbox ???????????????if (!field.checked){ ???????????????????break; ???????????????} ???????????????/* falls through */ ???????????default: ???????????????//don‘t include form fields without names ???????????????if (field.name.length){ ???????????????????parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); ???????????????} ???????} ???} ???????????return parts.join("&");}oSave.onclick = function(){ ???//创建xhr对象 ???var xhr; ???if(window.XMLHttpRequest){ ???????xhr = new XMLHttpRequest(); ???}else{ ???????xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘); ???} ???//异步接受响应 ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState == 4){ ???????????if(xhr.status == 200){ ???????????????//实际操作 ???????????????var data = JSON.parse(xhr.responseText); ???????????????if(data.success){ ?????????????????document.getElementById(‘createResult‘).innerHTML = data.msg; ???????????????}else{ ?????????????????document.getElementById(‘createResult‘).innerHTML = ‘出现错误：‘+data.msg; ?????????????} ???????????????????????????}else{ ???????????????alert(‘发生错误：‘ + xhr.status); ???????????} ???????} ???} ???//发送请求 ???xhr.open(‘post‘,‘service.php‘,true); ???xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); ???xhr.send(serialize(document.getElementById(‘postForm‘)));}</script></body></html>后端页面
<?php //用于过滤不安全的字符function test_input($data) { ??$data = trim($data); ??$data = stripslashes($data); ??$data = htmlspecialchars($data); ??return $data;}//设置页面内容的html编码格式是utf-8header("Content-Type:application/json;charset=utf-8");//定义一个多维数组，包含员工的信息，每条员工信息为一个数组$staff = array( ???array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>‘总经理‘), ???array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>‘开发工程师‘), ???array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>‘产品经理‘) ???);//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法if($_SERVER["REQUEST_METHOD"] == "GET"){ ???search();}else if($_SERVER["REQUEST_METHOD"] == "POST"){ ???create();}//通过员工编号搜索员工function search(){ ???//检查是否有员工编号的参数 ???//isset检测变量是否设置；empty判断值是否为空 ???if(!isset($_GET[‘number‘]) || empty($_GET[‘number‘])){ ???????echo ‘{"success":false,"msg":"参数错误"}‘; ???????return; ???} ???global $staff; ???$number = test_input($_GET[‘number‘]); ???$result = ‘{"success":false,"msg":"没有找到员工"}‘; ???//遍历$staff多维数组，查找key值为number的员工是否存在。如果存在，则修改返回结果 ???foreach($staff as $value){ ???????if($value[‘number‘] == $number){ ???????????$result = ‘{"success":true,"msg":"找到员工：员工编号为‘ .$value["number"] .‘，员工姓名为‘ .$value["name"] .‘，员工性别为‘ .$value["sex"] .‘，员工职位为‘ .$value["job"] .‘"}‘; ???????????break; ???????} ???} ???echo $result;}//创建员工function create(){ ???//判断信息是否填写完全 ???if(!isset($_POST[‘name‘]) || empty($_POST[‘name‘]) || ???????!isset($_POST[‘number‘]) || empty($_POST[‘number‘]) || ??????!isset($_POST[‘sex‘]) || empty($_POST[‘sex‘]) || ??????!isset($_POST[‘job‘]) || empty($_POST[‘job‘]) ????????){ ???????echo ‘{"success":false,"msg":"参数错误，员工信息填写不全"}‘; ???????return; ???} ???echo ‘{"success":true,"msg":"员工‘ .test_input($_POST[‘name‘]) .‘信息保存成功!"}‘;}?>实例演示
深入理解ajax系列第七篇
原文地址：http://www.cnblogs.com/yujihaia/p/7464535.html