首页 > 代码库 > AJAX
AJAX
定义
Asynchronous Javascript And XML 异步JavaScript和XML
一种创建交互式网页应用的网页开发技术
一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
注意
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,AJAX本身也是基于JS代码实现功能的
用途
使网页实现异步更新,可以使网页在不重新加载整个网页的情况下,对网页的某部分进行更新。 (局部刷新)
使用
原理
1 使用Javascript向服务器提出请求并处理响应
2 Ajax 的核心是 JavaScript 对象 XMLHttpRequest,XMLHttpRequest使我们可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户
3 流程图示
操作流程
GET方式操作流程
1 获取对象/创建请求对象 ------> var ajax = new XMLHttpRequest();
2
2.1 请求初始化
2.1.1 让对象知道要以什么方式打开(加载)谁
2.1.2 ajax.open(‘get‘,‘./1.php‘,true); open(请求的方式,请求的文件,异步true/同步false)
2.2 配置参数
2.2.1ajax.open(‘get‘,‘./1.php?name=jack&age=18‘,true);
3 正式发送请求 ----> ajax.send(); -------> 括号里可以写字符串,但仅限于使用POST方式时
4 判断请求是否已响应,设置回调函数
4.1判断请求是否已响应,并且告诉ajax请求成功后接下去该干啥
4.2 ajax.onreadystatechange=function(){
if(ajax.status==200 && ajax.readyState == 4){
alert(ajax.responseText);
}
}
4.2.1 onreadystatechange
4.2.1.1 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数》
4.2.1.2 readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化
onreadystatechange 事件被触发 4 次,对应着 readyState 的每个变化
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
4.3 status
200---->"OK"
404----->未找到页面
POST方式操作流程
1 获取对象/创建请求对象 var ajax = new XMLHttpRequest();
2 请求初始化
让对象知道要以什么方式打开(加载)谁
ajax.open(‘post‘,‘./1.php‘,true); -------> open(请求的方式,请求的文件,异步true/同步false)
3
3.1 设置请求头部信息 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3.2 正式发送请求 ajax.send(‘name=jack&age=18‘); 括号里可以写字符串作为POST请求的参数
4 判断请求是否已响应,设置回调函数
4.1 判断请求是否已响应,并且告诉ajax请求成功后接下去该干啥
4.2 ajax.onreadystatechange=function(){
if(ajax.status==200 && ajax.readyState == 4){
alert(ajax.responseText);
}
}
处理数组
前端辅助函数 eval() 将字符串变成可以执行的代码
后端辅助函数 php json_encode($arr) 将数组转化为字符串格式,该字符串形式为json格式 {name: "jack", age: 18}
注意
ajax只有在服务器环境中才会看到效果
ajax请求内传递的内容都是字符串格式的
使用POST方式时,必须要设置添加POST的请求头
get方式配置参数时,参数写在open()的URL内
post方式配置参数时,参数写在send()的()内
AJAX