利用ajax接收服务器信息,Ajax接收服务器端返回信息

面试题：ajax可以接收哪些信息？

答：浏览器可以接收的信息ajax都可以接收例如 字符串，html标签  css样式内容  xml内容 json内容等等，ajax接收返回的信息，需要结合readyState/onreadstatechange/responseText

ajax对象可以访问成员

属性：

responseText:以字符串的形式接收服务器端返回的信息

方法：

open()创建新的http协议(请求方式与地址)

send发送请求

例1  ajax_02.php

//给客户端返回信息：html标签 css样式  字符串

echo "

Today is very good  day

";

?>

ajax_request_03.html代码：

/p>

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

simple document

function f1(){

//建立Ajax对象

var xhr=new XMLHttpRequest();

//创建一个新的http请求，并设置请求的一个服务器端的地址,

//对象.open(请求方式get/post方式,url地址);

xhr.onreadystatechange=function(){

//获得readyState状态变化信息

console.log(xhr.readyState);

}

xhr.open('GET','./ajax_02.php');

//发送http请求

xhr.send(null);

//要随时感知ajax的变化

/*onreadystatechange是ajax的一个事件，在readyState状态发生变化的时候被触发，

为了感知最多的状态信息，要设置在对象创建完毕之后*/

if(xhr.readyState==4){

console.log(xhr.responseText);

}

}

ajax对服务器发起请求

例2   显示html代码

/p>

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

simple document

function f1(){

//建立Ajax对象

var xhr=new XMLHttpRequest();

//创建一个新的http请求，并设置请求的一个服务器端的地址,

//对象.open(请求方式get/post方式,url地址);

xhr.onreadystatechange=function(){

//获得readyState状态变化信息

//console.log(xhr.readyState);

//要随时感知ajax的变化

/*onreadystatechange是ajax的一个事件，在readyState状态发生变化的时候被触发，

为了感知最多的状态信息，要设置在对象创建完毕之后*/

if(xhr.readyState==4){

console.log(xhr.responseText);

}

}

xhr.open('GET','./ajax_02.php');

//发送http请求

xhr.send(null);

}

ajax对服务器发起请求

例3  在页面上显示ajax返回数据代码

/p>

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

simple document

function f1(){

//建立Ajax对象

var xhr=new XMLHttpRequest();

//创建一个新的http请求，并设置请求的一个服务器端的地址,

//对象.open(请求方式get/post方式,url地址);

xhr.onreadystatechange=function(){

//获得readyState状态变化信息

//console.log(xhr.readyState);

//要随时感知ajax的变化

/*onreadystatechange是ajax的一个事件，在readyState状态发生变化的时候被触发，

为了感知最多的状态信息，要设置在对象创建完毕之后*/

if(xhr.readyState==4){

console.log(xhr.responseText);

document.getElementById('result').innerHTML=xhr.responseText;

}

}

xhr.open('GET','./ajax_02.php');

//发送http请求

xhr.send(null);

}

ajax对服务器发起请求

如图所示：