Ajax简介与控制器获取数据的案例

什么是Ajax

1.Ajax不是某种编程语言

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页；

2.同步与异步

同步：就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步：是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态，当有信息返回是系统会通知进程进行处理，这样可以提高执行的效率。

异步实现：

• 运用HTML与CSS来实现页面，表达信息；
• 运用XMLHttpRequest和web服务器进行数据的异步交换;
• 运用JavaScript操作DOM，实现动态局部刷新;

1. AJAX-创建XMLHttpRequest 对象

什么是XMLHttpRequest对象

1. XMLHttpRequest对象用于在后台与服务器交换数据创建XMLHttpRequest对象,所有现代浏览器均可内建XMLHttpRequest 对象。

 

1. 创建XMLHttpRequest对象的语法

var 变量 = new XMLHttpRequest（）；

老版本的Internet Explorer ( IE5和IE6 ) 使用ActiveXObject对象：

var 变量 = new ActionXObject（ ” Microsoft.XMLHTTP ” ）;

这里我们一般会用到一个条件语句来检查网页是否支持XMLHttpRequest对象，如果支持则创建 XMLHttpRequest 对象，若不支持则创建ActiveXObject对象，代码如下；

AJAX - 向服务器发送请求

1.向服务器发送请求，我们使用XMLHttpRequest对象的 open（）和send（）方法：open（method，url，asyns）规定请求的类型，URL以及是否异步处理请求。

参数说明：method：请求的类型；GET 或 POST;

url ：文件在服务器上的位置；

async：true（异步）或 false（同步）Asynchronous；

send（string）：将请求发送到服务器（参数说明：string仅用于POST请求

）；

一个简单的GET请求：

变量.open（“GET”，“url”，true）；（true也可不输入，因为该方法默认为异步实现）；

变量.send（）；

2.如果需要像HTM,L表单那样POST数据，请使用srtRequestHeader（）来添加HTTP头然后在send方法中规定您希望发送的数据：

变量.open("POST","url",true);

变量.setRequestHeader("Content-type","application/x-www-form-urlencoded");

变量.send(data);//data表单中需要提交的数据（字符串）

SetRequestHeader（header，value）：向请求添加HTTP头：

Header：规定头的名称：value规定头的值；

 

案例

From表单从控制中获取数据

HTML部分

 JS部分

1. 给按钮绑定一个点击事件，然后在给一个变量（var xiao；），使用条件语句判断当前网页支持那种对象：
2. Xiao.open（"post", "/使用XML提交/getDatapost"）

Post为提交方法；"/使用XML提交/getDatapost"为提交的文件的位置；

Send：将请求发送到服务器；

onreadystatechange事件；

在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，每当readyState改变时，就会触发onreadystatechange事件。

XMLHttpRequest对象的三个重要属性：

1. onreadystatechange：存储函数(或函数名),每当readyState属性改变时,就会调用该函数。

2. readyState：存有XMLHttpRequest的状态，从0到4发生变化。

      0：请求为初始化；

      1：服务器链接已建立；

      2：请求已接收；

      3：请求处理中；

      4：请求已完成，且响应已就绪；

1. Status：200：“OK”  404: 未找到页面；
2. 在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当readyState等于4且status为 200 时，表示响应已就绪;
3. JSON.parse()可将json形式的字符串转化为JS对象;

效果图