AJAX技术初级探索

一 概念

Ajax技术能够实现页面以异步方式从服务器获取信息,无需刷新页面

Ajax的核心技术是XMLHttpRequest对象(XHR)

异步实际就是请求数据的代码不会阻塞页面向下执行

二 原生Ajax

1 创建XMR对象

??? var xhr=new XLMHttpRequest();

2 打开请求|准备请求

??? xhr.open(参数) ?????

参数分别为:?

请求类型?? get(将内容拼接在请求地址中)

post(非地址传输)

请求路径?? js/data.json??

若是get请求在路径之后通过?拼接参数,参数以&连接

是否异步?? Boolean??? true为异步 false为同步

默认ture为异步执行

3 发送请求

??? xhr.send();???

send中的传递到后台的数据

?????????? get请求 为null(请求参数在请求地址后面)

?????????? post请求 可设传递参数,若无为null?

参数格式为” uname=zhangsan&upwd=123”

??? 注意:在post提交之前添加模拟表单提交的代码

xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);

4 判断响应

??? 异步请求

?????? 1绑定监听事件onreadystatechange

2获取响应状态码readyState, 判断接收是否完成

readyState为4表示接收结束

?????? 3判断响应结果

?????????? xhr.status??? 200为请求成功 ?

404为请求路径不存在

500为服务器内部异常?

?????? 4获取响应数据

?????????? xhr.responseText? 服务器响应的数据(可能为各种格式)

xhr.onreadystatechange = function(){ ?? if (xhr.readyState == 4) { ????? if (xhr.status == 200) { ????????? console.log(xhr.responseText); ????? } ?? } }

同步请求不需要监听与状态码

三 原生Ajax封装

1 定义调用对象

?????? 请求类型 请求地址 是否异步 上传信息 数据处理方法

var u1 = { ??? method:"GET", ??? url:"js/data.json?key=a&uname=zhangsan&upwd=12345", ??? async:true, ??? data:{ ?????????? uname:"zhangsan", ?????????? upwd:"123456" ??? }, ??? success:function(result){ ?????????? console.log(result); ??? } };

?????? 注意:????? 数据处理方法中的参数result表示ajax回调的结果数据.

数据处理方法中执行结果数据的处理.

2 封装体

?????? A 创建XMLHttpRequest核心对象

?????? 代码:

var xhr = new XMLHttpRequest();

?????? B 格式化参数

????????????? 本过程中取出调用对象的各参数,赋值到变量中.主要内容是拼接与遍历

请求类型(转大写)

请求地址(get请求中进行字符拼接)

是否异步

上传信息(转为字符串)

数据处理方法

var param = obj.data; // 将json对象格式的参数转换为指定格式的字符串 ??? uname=zhangsan&upwd=12345 var paramArray = []; // 遍历参数对象 for (var key in param) { // 拼接参数名和参数值 ?????? var pa = key+"="+param[key]; // 将数据追加到数组中 ?????? paramArray.push(pa); } // 将数组通过指定符号转换成字符串 var p = paramArray.join("&"); // 得到用户请求类型 var method = obj.method.toUpperCase(); //判断请求类型，如果是GET请求，在请求地址后面拼接请求参数 if (method == "GET") { // 判断地址中是否包含"?"，如果有，则拼接时使用"&";如果没有，则使用"?" ??? obj.url +=(obj.url).indexOf("?") > -1? ? "&" + p:"?" + p; }

?????? C打开请求???

xhr.open(method,obj.url,obj.async);

?????? D请求提交

????????????? 在提交前将post方式请求前添加模拟表提交

????????????? 提交代码,经post中的请求内容加到提交方法中

// 如果是POST请求，则需要模拟表单提交 if (method.toUpperCase() == "POST") { // 模拟表单提交 ??? xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘); ??? // post提交 ??? xhr.send(p); } else { ?????? // get提交 ?????? xhr.send(null); }

?????? ?E 响应判断

????????????? 分别对异步同步执行对应的流程

????????????? 设置回调函数 调用传入的数据处理方法对服务端响应的数据进行处理

判断是否是否是异步请求 if (obj.async) { // 异步请求 // 监听readySate的值，判断响应是够完毕 ??? xhr.onreadystatechange = function() { // 如果完全响应，值为4 ??? if (xhr.readyState == 4){callback();} ??? } } else { // 同步请求 ??? callback(); ??? }

// 回调函数 function callback() { // 判断是否响应成功? status=200 if (xhr.status == 200) { ??? // 得到相应数据，并回调数据给调用者 ??? var result = xhr.responseText; ??? obj.success(result); ??? } }

三 通过JQuery使用Ajax

JQuery中封装了Ajax

调用格式

普通调用

??? $.ajax(参数);? 参数为json对象

?????? json对象的参数包括

??? {?? type: "get",???????????????? 或者”post”

?????? url: "js/data.json",????????? 目标地址

?????? data:{ },?????????????????? 传入的数据

?????? dataType: "json"??????????????? 服务器返回的数据类型

?????? success:function(result){对result的操作代码}

}??

以下为具体内容

type：请求方式 GET/POST

url：请求地址 url

async：是否异步，默认是 true 表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

get调用

??? $.get(参数)??? 通过逗号分隔 省略key值

$.get("js/data.json",{},function(data){console.log(data);});

post调用

??? $.post(参数)?? 通过逗号分隔 省略key值

$.post("js/data.json",function(data){console.log(data);});

getJSON调用?????? 属性通过逗号分隔 省略key值

$.getJSON("js/data.json",function(data){console.log(data);});

?

跨域调用

??? 两个域名,从一个域名访问另一个的域名 需要通过jsonp方式发送请求

??? 条件 ?? 1远程接口支持跨域访问

2 ajax中设置dataType:"jsonp" [jsonp:’callback’]

$.ajax({ ?? type:"get", ?? url:"http://iservice.itshsxt.com/restaurant/find", ?? data:{ }, ?? dataType:"jsonp", ?? success:function(result){console.log(result);} });

三 eclipse中web项目的设置

调出server窗口

??? window菜单->show view ->other ->查找servers 选中打开窗口

创建server

??? 右击new ->server -> 选中Apache下的Tomcat版本 next->

选择tomcat目录(选bin的父目录)? 选中jdk next ->完成

启动tomcat测试

注意:Tomcat的默认接口8080,与oracle冲突,需要手动关oracle服务或改端口

?

创建web项目

文档框new选择other.查找web 选择Dynamic Web Project? 设项目名一路确认

在tomcat上右击选择(add and move) 在左右选框中移动项目

?

web项目中webContent下创建页面和资源文件 webContent与src都相当于根目录

??? 访问地址 localhost:端口号/项目名/(webContent下的直接目录)