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