Ajax 与异步数据传输

//服务器端 search.php

<?php $name = $_GET[name]; //模拟数据查询结果 echo '{"name":"' . $name .'","age":18,"gender":"男","tel":"13211112222","address":"北京市海淀区xxxxxxxx"}'; ?>

//POST方法

function search(name, fun){

var xhr = new XMLHttpRequest();

var url = “search.php”;

var para = “name=” + window.encodeURIComponent(name) + “&t=” + Math.random();

xhr.open(“POST”, url);

//POST方式下，必须把 Content-Type 设置为application/x-www-form-urlencoded

xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

xhr.onreadystatechange = function(){

if(xhr.readyState == 4 && xhr.status == 200){

console.log(xhr.responseText);

var data = JSON.parse(xhr.responseText); //获取了 JSON 字符串

fun(data);

}

}

xhr.send(para);

}

function show(data){

this.innerHTML = “姓名：” + data.name + “
性别：” + data.gender + “
年龄：” + data.age + “
地址：” + data.address + “
电话：” + data.tel;

}

var output = document.getElementById(“output”);

search(“李华”, show.bind(output));

//服务器端 search.php

<?php $name = $_POST[name]; //模拟数据查询结果 echo '{"name":"' . $name .'","age":18,"gender":"男","tel":"13211112222","address":"北京市海淀区xxxxxxxx'; ?>

上述代码的 jQuery 写法：

//GET 方式

function search(name, fun){

var url = “search.php?name=” + window.encodeURICompone