Ajax的原理和编程步骤

Ajax的简介

什么是Ajax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页

Ajax所包含的技术

AJAX 的核心是 XMLHttpRequest 对象。

1.使用CSS和XHTML来表示。

2.使用DOM模型来交互和动态显示。

3.使用XMLHttpRequest来和服务器进行异步通信。

4.使用javascript来绑定和调用。

Ajax的工作原理

在用户和服务器之间添加了一个中间层(AJAX引擎),使用户操作与服务器响应异步话,并不是所有的用户请求都提交给服务器。
数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

来看看两个方式的区别

Ajax的原理和编程步骤

XMLHttpRequ对象常用的三个属性

onreadystatechange属性
存有服务器响应的参数

readyState属性
存有服务器响应状态的信息

readyState 属性可能的值:

Ajax的原理和编程步骤

responseText 属性

可以取得有服务器返回的数据

其他的属性如下

Ajax的原理和编程步骤

xmlhttprequst的方法

open()方法

xmlHttp.open("GET","test.php",true);
第一个参数定义发送请求所使用的方法
第二个参数规定服务器脚本的URL
第三个参数规定了请求是否需要异步的处理

send()方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录,那么代码是这样的:

xmlHttp.send(null);

其他方法如下

Ajax的原理和编程步骤

AJAX编程步骤

1.创建XMLHttpRequest对象
2.设置请求方式
3.调用回调函数
4.发送请求
5.处理返回的结果

创建XMLHttpRequest对象

var xmlhttp=new XMLHttpRequest();
一般来说手写AJAX的时候,首先需要判断该浏览器是否支持XMLHttpRequest对象,如果支持则创建该对象,如果不支持则创建ActiveX对象。
//第一步:创建XMLHttpRequest对象
    var xmlHttp;
    if (window.XMLHttpRequest) { //非IE
    xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }

设置请求方式

一般是有两种请求方式,一个是GET一个是POST,需要设置具体使用哪个请求方式
xmlhttp.open('method',URL,async);

参数如下

Ajax的原理和编程步骤

调用回调函数

当前为异步请求的时候,需要写一个回调函数,XMLHttpRequest对象有一个属性,这个属性要返回一个匿名的方法,所谓的回调函数,就是请求在后台处理完,再返回到前台所实现的功能。

xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成,且响应已就绪
                    */
                    if(xmlhttp.readyState === 4){
                        // 判断是否请求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.处理返回的结果
                            console.log("接收到服务器返回的数据");
                        }else{
                            console.log("没有接收到服务器返回的数据");
                        }

                    }
                }

发送请求

xmlhttp.send

##处理返回的结果

相关推荐