Ajax基础学习.docx
《Ajax基础学习.docx》由会员分享，可在线阅读，更多相关《Ajax基础学习.docx（34页珍藏版）》请在冰豆网上搜索。
Ajax基础学习
Ajax全接触
AJAX的全称：
AsynchronousJavaScriptandXML（异步的JavaScript和XML）
Ajax不是某种编程语言，是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。
·运用HTML和CSS来实现页面，表达信息；
·运用XMLHttpRequest和web服务器进行数据的异步交换；
·运用JavaScript操作DOM，实现动态局部刷新；
实例化一个对象：
XMLHttpRequest对象
varrequest=newXMLHttpRequest（）;//不兼容IE5、IE6
为了兼容，可使用以下代码：
varrequest;
if（window.XMLHttpRequest）{
request=newXMLHttpRequest（）;//IE7+,Firefox,Chrome,Opera,Safai…
}else{
request=newActiveXObject（“Microsoft,XMLHTTP”）;//IE6,IE5
}
http是计算机通过网络进行通信的规则
HTTP是一种无状态协议；无状态即不建立持久的连接，不保留建立连接的记忆。
HTTP请求：
一个完整的HTTP请求过程，通常有下面7个步骤：
1.建立TCP连接
2.Web浏览器向Web服务器发送请求命令
3.Web浏览器发送请求头信息
4.Web服务器应答
5.Web服务器发送应答头信息
6.Web服务器向浏览器发送数据
7.Web服务器关闭TCP连接
一个HTTP请求一般由四部分组成：
1.HTTP请求的方法或动作，比如是GET还是POST请求
2.正在请求的URL，总得知道请求的地址是什么吧
3.请求头，包含一些客户端环境信息，身份验证信息等
4.请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等
例：
·GET：
一般用于信息获取
使用URL传递参数
对所发送信息的数量也有限制，一般在2000个字符
·POST：
一般用于修改服务器上的资源
对所发送信心的数量无限制
·一个HTTP响应一般由三部分组成：
1.一个数字和文字组成的状态码，用来显示请求是成功还是失败
2.响应头，响应头也和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等
3.响应体，也就是响应正文
例：
·HTTP状态码由3位数字构成，其中首位数字定义了状态码的类型：
1XX：
信息类，表示收到Web浏览器请求，正在进一步的处理中
2XX：
成功，表示用户请求被正确接收，理解和处理例如：
200OK
3XX：
重定向，表示请求没有成功，客户必须采取进一步的动作
4XX：
客户端错误，表示客户端提交的请求有错误，例如：
404NOTFound，意味着请求中所引用的文档不存在
5XX：
服务器错误，表示服务器不能完成对请求的处理，如500
XMLHttpRequest发送请求
open（method,url,async）:
method->发送请求方法，url->请求地址，async->请求同步/异步（false/true，默认为true）
send（string）
例：
注意：
request.setRequestHeader要写在request.open和request.send之间，否则会抛出异常
XMLHttpRequest取得响应
·responseText：
获得字符串形式的响应数据
·responseXML：
获得XML形式的响应数据
·status和statusText：
以数字和文本形式返回HTTP状态码
·getAllResponseHeader（）：
获取所有的响应报头
·getResponseHeader（）：
查询响应中的某个字段的值
·readyState属性
0：
请求未初始化，open还没有调用
1：
服务器连接已建立，open已经调用了
2：
请求已接收，也就是接收到头信息了
3：
请求处理中，也就是接收到响应主体了
4：
请求已完成，且响应已就绪，也就是响应完成了
例：
案例：
1.查询员工信息，可以通过输入员工编号查询员工基本信息；
2.新建员工信息，包含员工姓名，员工编号，员工性别，员工职位；
注意：
·纯html页面，用来实现员工查询和新建的页面；
·php页面，用来实现查询员工和新建员工的后台接口。
代码：
server.php:
php
//设置页面内容是html编码格式是utf-8
header（"Content-Type:
text/plain;charset=utf-8"）;
//header（"Content-Type:
application/json;charset=utf-8"）;
//header（"Content-Type:
text/xml;charset=utf-8"）;
//header（"Content-Type:
text/html;charset=utf-8"）;
//header（"Content-Type:
application/javascript;charset=utf-8"）;
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff=array
（
array（"name"=>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"）,
array（"name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"开发工程师"）,
array（"name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理"）
）;
//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if（$_SERVER["REQUEST_METHOD"]=="GET"）{
search（）;
}elseif（$_SERVER["REQUEST_METHOD"]=="POST"）{
create（）;
}
//通过员工编号搜索员工
functionsearch（）{
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量$_GET和$_POST用于收集表单数据
if（!
isset（$_GET["number"]）||empty（$_GET["number"]））{
echo"参数错误";
return;
}
//函数之外声明的变量拥有Global作用域，只能在函数以外进行访问。
//global关键词用于访问函数内的全局变量
global$staff;
//获取number参数
$number=$_GET["number"];
$result="没有找到员工。
";
//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
foreach（$staffas$value）{
if（$value["number"]==$number）{
$result="找到员工：
员工编号：
".$value["number"]."，员工姓名：
".$value["name"].
"，员工性别：
".$value["sex"]."，员工职位：
".$value["job"];
break;
}
}
echo$result;
}
//创建员工
functioncreate（）{
//判断信息是否填写完全
if（!
isset（$_POST["name"]）||empty（$_POST["name"]）
||!
isset（$_POST["number"]）||empty（$_POST["number"]）
||!
isset（$_POST["sex"]）||empty（$_POST["sex"]）
||!
isset（$_POST["job"]）||empty（$_POST["job"]））{
echo"参数错误，员工信息填写不全";
return;
}
//TODO:
获取POST表单数据并保存到数据库
//提示保存成功
echo"员工：
".$_POST["name"]."信息保存成功！
";
}
XMLHttpRequest.html:
DOCTYPEHTML>
Demo员工查询
查询
员工新建
保存
JSON基本概念
·JSON：
JavaScri对象表示法（JavaScriptObjectNotation）
·JSON是存储和交换文本信息的语法，类似XML。
它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成
·JSON是独立于语言的，也就是说不管什么语言，都可以解析json，只需要按照json的规则来就行。
JSON与XML比较
·json的长度和xml格式比起来很短小
·json读写的速度更快
·json可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便
JSON语法规则
·JSON数据的书写格式是：
名称/值对
名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开：
比如”name”:
”郭靖”
·JSON的值可以是下面这些类型：
数字（整数或浮点数），比如123，1.23
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null
例：
{
“staff”:
[
{“name”:
”洪七”,”age”:
70},
{“name”:
”郭靖”,”age”:
35},
{“name”:
”黄蓉”,”age”:
30}
]
}
JSON解析
·eval和JSON.parse
·在代码中使用eval是很危险的！
特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse（）方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。
代码：
serverjson.php：
php
//设置页面内容是html编码格式是utf-8
header（"Content-Type:
text/plain;charset=utf-8"）;
//header（"Content-Type:
application/json;charset=utf-8"）;
//header（"Content-Type:
text/xml;charset=utf-8"）;
//header（"Content-Type:
text/html;charset=utf-8"）;
//header（"Content-Type:
application/javascript;charset=utf-8"）;
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff=array
（
array（"name"=>"洪七","number"=>"101","sex"=>"男","job"=>"总经理"）,
array（"name"=>"郭靖","number"=>"102","sex"=>"男","job"=>"开发工程师"）,
array（"name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>"产品经理"）
）;
//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if（$_SERVER["REQUEST_METHOD"]=="GET"）{
search（）;
}elseif（$_SERVER["REQUEST_METHOD"]=="POST"）{
create（）;
}
//通过员工编号搜索员工
functionsearch（）{
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值为否为空
//超全局变量$_GET和$_POST用于收集表单数据
if（!
isset（$_GET["number"]）||empty（$_GET["number"]））{
echo'{"success":
false,"msg":
"参数错误"}';
return;
}
//函数之外声明的变量拥有Global作用域，只能在函数以外进行访问。
//global关键词用于访问函数内的全局变量
global$staff;
//获取number参数
$number=$_GET["number"];
$result='{"success":
false,"msg":
"没有找到员工。
"}';
//遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
foreach（$staffas$value）{
if（$value["number"]==$number）{
$result='{"success":
true,"msg":
"找到员工：
员工编号：
'.$value["number"].
'，员工姓名：
'.$value["name"].
'，员工性别：
'.$value["sex"].
'，员工职位：
'.$value["job"].'"}';
break;
}
}
echo$result;
}
//创建员工
functioncreate（）{
//判断信息是否填写完全
if（!
isset（$_POST["name"]）||empty（$_POST["name"]）
||!
isset（$_POST["number"]）||empty（$_POST["number"]）
||!
isset（$_POST["sex"]）||empty（$_POST["sex"]）
||!
isset（$_POST["job"]）||empty（$_POST["job"]））{
echo'{"success":
false,"msg":
"参数错误，员工信息填写不全"}';
return;
}
//TODO:
获取POST表单数据并保存到数据库
//提示保存成功
echo'{"success":
true,"msg":
"员工：
'.$_POST["name"].'信息保存成功！
"}';
}
?
>
XMLHttpRequestJson.html:
DOCTYPEHTML>
Demo员工查询
查询
员工新建
保存