Ajax必须了解的(最全 通俗版)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
By CaesarChang
~关注我 带你看更多精品技术和面试必备
一 Ajax技术与原理
1.1 Ajax简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
1.2 Ajax所包含的技术
大家都知道 ajax 并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。
1. 使用 CSS 和 XHTML 来表示。
2. 使用 DOM 模型来交互和动态显示。
3. 使用 XMLHttpRequest 来和服务器进行异步通信。
4. 使用 javascript 来绑定和调用。
AJAX 的核心是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用 ActiveXObject ,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象
1.3 Ajax的工作原理
Ajax 的工作原理相当于在用户和服务器之间加了 — 个中间层 (AJAX 引擎 ) ,使用户操作与服务器响应异步化。并不是
所有的用户请求都提交给服务器。像 — 些数据验证和数据处理等都交给 Ajax引擎自己来做, ,只有确定需要从服务器
读取新数据时再由 Ajax 引擎代为向服务器提交请求。
来看看和传统方式的区别
1.4 XMLHttpRequest常用属性
1. onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。 下面的代码定义一个空的函数,可同时对
onreadystatechange 属性进行设置:
xmlHttp . onreadystatechange = function () { // 我们需要在这写一些代码 }
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}
2. readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时, onreadystatechange 函数就会被执行。
readyState 属性可能的值:
我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成 ( 意味着可获得数据 ) :
≈
3. resp
可以通过 responseText 属性来取回由服务器返回的数据。
responseText :
xmlHttp . onreadystatechange = function () {
if ( xmlHttp . readyState == 4 ) {
document . myForm . time . value = xmlHttp . responseText ;
}
}
1.5 XMLHttpRequest方法
1. open() 方法
open() 有三个参数。第一个参数定义发送请求所使用的方法,第二个参数规定服务器端脚本的 URL,第三个是否异步处理
xmlHttp . open ( "GET" , "test.php" , true );
2. send() 方法
send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录,那么代码是这样的:
xmlHttp . send ( null );
其它方法如下:
二 Ajax编程步骤
1. 创建XMLHttpRequest对象。
2. 设置请求方式。
3. 调用回调函数。
4. 发送请求。
下面来看下具体步骤:
2.1 创建 XMLHttpRequest 对象
创建 XMLHttp 对象的语法是:
var xmlHttp = new XMLHttpRequest ();
如果是 IE5 或者 IE6 浏览器,则使用 ActiveX 对象,创建方法是:
var xmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP" );
一般我们手写 AJAX 的时候,首先要判断该浏览器是否支持 XMLHttpRequest 对象,如果支持则创建该对象,如果不
支持则创建 ActiveX 对象。 JS 代码如下:
//第一步:创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
//非IE
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
2.2 设置请求方式 功能 参数
在 WEB 开发中,请求有两种形式,一个是 get ,一个是 post ,所以在这里需要设置一下具体使用哪个请求,
XMLHttpRequest 对象的 open() 方法就是来设置请求方式的。 open()方法
//第二步:设置和服务器端交互的相应参数,向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);
2.3 调用回调函数
所谓回调函数,就是请求 在后台处理完,再返回到前台所实现的功能。在这个例子里,我们的回调函数要实现的功能就是接收后台处理后反回给前台
// 第三步:注册回调函数
xmlHttp . onreadystatechange = function () {
if ( xmlHttp . readyState == 4 ) {
if ( xmlHttp . status == 200 ) {
var obj = document . getElementById ( id );
obj . innerHTML = xmlHttp . responseText ;
} else {
alert ( "AJAX 服务器返回错误! " );
}
}
}
在上面代码中, xmlHttp.readyState 是存有 XMLHttpRequest 的状态。
从 0 到 4 发生变化。
0: 请求未初始化。
1: 服务器连接已建立。
2: 请求已接收。
3: 请求处理中。
4: 请求已完成,且响应已就绪。所以这里我们判断只有当 xmlHttp.readyState为 4 的时候才可以继续执行。
xmlHttp.status 是服务器返回的结果,
其中 200 代表正确。 404 代表未找到页面,所以这里我们判断只有当 xmlHttp.status等于200 的时候才可以继续执行。
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
这段代码就是回调函数的核心内容,就是获取后台返回的数据,然后将这个数据赋值给 id 为 testid 的 div 。 xmlHttp
对象有两个属性都可以获取后台返回的数据,分别是: responseText 和 responseXML ,其中 responseText 是用来
获得 字符串形式 的响应数据, responseXML 是用来获得 XML 形式 的响应数据。至于选择哪一个是取决于后台给返
回的数据的,这个例子里我们只是显示一条字符串数据所以选择的是 responseText 。 responseXML 将会在以后的
例子中介绍。
2.4 发送请求
// 第四步:设置发送请求的内容和发送报送。然后发送请求
var uname = document . getElementsByName ( "userName" )[ 0 ]. value ;
var upass = document . getElementsByName ( "userPass" )[ 0 ]. value ;
var params = "userName=" + uname + "&userPass=" + upass + "&time=" + Math . random ();
// 增加 time 随机参数,防止读取缓存
xmlHttp . setRequestHeader ( "Content-type" , "application/x-www-form-urlencoded;charset=UTF-8" );
// 向请求添加 HTTP 头, POST 如果有数据一定加加!!!!
xmlHttp . send ( params );
三 jquery的ajax操作
3.1传统方式实现Ajax的不足
步骤繁琐
方法、属性、常用值较多不好记忆
3.2 ajax() 方法
可以通过发送 HTTP 请求加载远程数据,是 jQuery 最底层的 Ajax 实现,具有较高灵活性。
参 数 是 .ajax ( ) 方法的参数列表,用于配置 Ajax 请求的键值对集合 ; $.ajax({
url: 请求地址
type:"get | post | put | delete " 默认是 get,
data: 请求参数 {"id":"123","pwd":"123456"},
dataType: 请求数据类型 "html | text | json | xml | script | jsonp ",
success:function(data,dataTextStatus,jqxhr){ },// 请求成功时
error:function(jqxhr,textStatus,error)// 请求失败时
})
3.3 get() 方法通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
$.get(url,data,function(result) {
// 省略将服务器返回的数据显示到页面的代码
});
url: 请求的路径
data: 发送的数据
success: 成功函数
datatype 返回的数据
3.4 post() 方法通过远程 HTTP GET 请求载入信息。
$.post(url,data,function(result) {
// 省略将服务器返回的数据显示到页面的代码
});
url: 请求的路径
data: 发送的数据
success: 成功函数
datatype 返回的数据
四 JSON
4.1 、什么是 JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。
4.2.1 、 JSON 的定义
4.2.2 、 JSON 对象的访问
json 对象,顾名思义,就知道它是一个对象。里面的 key 就是对象的属性。我们要访问一个对象的属性,只需要使
用【对象名 . 属性名】的方式访问即可。
var 变量名 = {
“key” : value , // Number 类型
“key2” : “value” , // 字符串类型
“key3” : [] , // 数组类型
“key4” : {}, // json 对象类型
“key5” : [{},{}] // json 数组
};
4.3、JSON在java中的使用(重要)
我们要使用json和java中使用,我们需要使用到一个第三方的包。它就是
java对象和json之间的转换
《 1 》单个对象或 map 集合
java->json :
Users user2=new Users();
user2.setUsername(" 李四 ");
user2.setPassword("abc");
user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user);//obj 就是 json 格式的
json->java :
String str="{'username':' 李四 ','password':'admin','age':19}";
JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json , Users.class);
《 2 》对象集合和 json 的转换
java集合->json数组:
List list=new ArrayList();
list.add("dd");
list.add("aa");
JSONArray obj=JSONArray.fromObject(list);//set 也是这么转
json数组->java集合:
String str3="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'展示干'}]";
JSONArray json3=JSONArray.fromObject(str3);
//默认转换成ArrayList
List<Users> list=(List<Users>) JSONArray.toCollection(json3,Users.class);
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |