利用XMLHttpRequest(XHR)对象实现与web服务器通信

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

XMLHttpRequest对象：XMLHttpRequest是一个JS对象，页面利用它与web服务器通信。XHR对象的基本思想是让JS代码自己发送请求，以便随时获取数据，这种请求是异步的，也就是说请求期间网页任然能响应用户的操作。

XHR对象与web服务器通信的流程：

1、在服务器端创建一个PHP脚本

//服务器端脚本，用于处理发送过去的数据，然后返回结果。index.php

//客户端发送的URL应该是：http://www.yuming.com/index.php? no1=20&no2=40

<?php

    $num1 = $_GET['no1'];

    $num2 = $_GET['no2'];

    $sum = $num1 + $num2;

    echo $sum; //返回给客户端的内容

?>

2、在客户端JS代码中创建XHR对象请求服务器(该方法不支持IE6)

//创建一个XMLHttpRequest对象

var req = new XMLHttpRequest();

//调用XHR对象的open()方法，这个方法有三个参数。1、HTTP操作类型(GET或POST)。2、请求目标的url。3、浏览器是否异步工作(true是异步，false是同步)

req.open("GET", "index.php?no1=20&no2=40", true)

//只要服务器返回信息，就会触发这个事件(其实就是回调函数)，其中包括返回的响应数据

req.onreadystatechange = function (){

    //在接收到返回信息时，需要首先检查XHR对象的两个属性

    //一个是readyState属性，它的值是从0-4的一个数值

    //0是指请求未初始化

    //1是请求初始化完毕

    //2是请求已经发送

    //3是请求在处理中；通常已有部分数据可用了，但是服务器还没有完成响应的生成

    //4是请求响应完成

    //另外一个是status属性，用于保存HTTP状态码，当它的值为200时，表示一切顺利

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

        //从XHR对象的response属性中取得返回的数据

        var result = req.responseText;

    }

}

//调用XHR对象的send()方法实际的发送请求到服务器

//参数是可选的，可以是一个DOM对象的实例、一个输入流，或者是一个串。传入这个对象的内容会作为请求体的一部分发送。

req.send(null);