Ajax本地运行环境搭建以及运行流程

1,首先我们先了解下什么是Ajax以及为什么要使用ajax?

        Ajax(Asynchronous JavaScript and XML),即为异步的JavaScript和xml,是指一种创建交互式网页应用的网页开发技术。首先,我们要知道,Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。其次,了解到它是异步,这样就可使网页从服务器请求少量的信息,而不是整个页面。

       而什么是异步?跟同步有什么区别呢?当你理解这个之后,你就明白为什么要使用ajax了。在Ajax之前,当我们需要先服务器请求数据时,我们向服务器发送一个请求,发送之后我们只能等待服务器的响应,给我们返回数据回来,而在这个期间我们什么都干不了,只能等待,这就是同步。而ajax的出现则帮我们解决了这个问题,我们先看下ajax的工作原理,如图1所示

Ajax本地运行环境搭建以及运行流程_第1张图片
图1 ajax的工作原理

有了ajax之后,我们只需要把请求服务器这一块,交给ajax去做就行了,ajax就相当于“中间商”或者“中介”什么的,替我们去“跑腿”,这样,我们就不需要刷新整个页面去等待服务器的响应了,只需要利用JavaScript向服务器发送请求即可,就可以再不刷新页面的情况下,实现局部页面数据更新的效果。

2,Ajax本地运行的环境搭建。

       在ajax运行之前,我们要先搭建好环境。使用wampServer或者xampp都可以,浏览器搜索下载即可。以wampserver为例来说明,下载完之后运行即可。在安装的目录中,有一个叫www的文件夹,我们把要运行的的文件放在它里面即可。首先,检查wampserver是否运行了,在浏览器输入localhost回车,看到图2说明已经启动了。之后我们输入要执行的文件。假如我要执行的是www目录下的index.html文件,在浏览器输入localhost/index.html回车即可运行。

Ajax本地运行环境搭建以及运行流程_第2张图片
图2 wampServer成功执行界面

3,Ajax的运行流程是怎样的?

使用ajax只需要以下几个步骤即可:

1,创建XMLHTTPRequest对象

var xhr = new XMLHttpRequest();在ie6及以下,我们要这样设置xhr = new ActiveXObject('Microsoft.XMLHTTP');将其合并为:

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

2,创建http请求

利用open方法,有三个参数:第一个,设置请求方式get/post;第二个,设置请求地址,url;第三个,是否为异步,默认为true,即为异步,可不填。如:

xhr.open(method,url,true);

3,发送请求

xhr.send();

4,服务器响应

xhr.onreadystatechange = function(){

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

console.log(xhr.responseText);//请求成功后我们可以在这处理数据

} else {

alert('出错了,Err:' + xhr.status);

}

}

readyState: ajax的工作状态,存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成,且响应已就绪

responseText: ajax的请求返回的数据(字符串形式)

state: 服务器状态,服务器常用的状态码及其对应的含义如下:

200:服务器响应正常。

304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。

400:无法找到请求的资源。

401:访问资源的权限不够。

403:没有权限访问资源。

404:需要访问的资源不存在。

405:需要访问的资源被禁止。

407:访问的资源需要代理身份验证。

414:请求的URL太长。

500:服务器内部错误。

你可能感兴趣的:(Ajax本地运行环境搭建以及运行流程)