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