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下的直接目录)
