Ajax如何使用的小demo
来源：互联网 发布：sql数据挖掘 编辑：程序博客网 时间：2024/06/03 19:05
大家都知道Ajax是js里面很重要的一部分，前台的局部动态刷新页面离不开它。很多人对它是既熟悉，又陌生，熟悉是因为经常听到这个名字，陌生是因为很多人，特别是像我这样的初学者可能没有实际接触过Ajax。所以，前几天我在网上找了一些资料，看了一些有关Ajax的信息，在这里简单的整理一下。
Ajax是异步的javascript和xml的缩写，异步的意思就是说我管我的，你管你的，你那里还在加载是不会影响我这边加载，而同步则是指我要是想加载的话，必须等到你那边加载好了以后才行。在说Ajax之前，我们有必要来了解一些其他的知识。
HTTP是一种无状态协议，就是指它每次请求传送结束以后都会清空，下一次还想传送的话就要重新建立连接，一个完整的http请求过程分为7个步骤
1.建立TCP连接
2.web浏览器向web服务器发送请求命令
3.web浏览器发送请求头
4.web服务器应答
5.web服务器发送应答头
6.web服务器向浏览器发送数据
7.关闭TCP连接
而一个http请求又可以分为4部分
1.http请求的方法或动作：get或者post
2.请求的url
3.请求头，包含一些客户端环境的信息
4.请求提，即请求的正文，表单信息等
而这里的get使用url来传递参数，一般2000个字符以内，post一般用于修改服务器上的资源，对所发送的信息数量没有要求
一个http响应一般由三部分组成：
1.一个由数字和文字组成的状态码，用来显示是成功还是失败
2.响应头
3.响应体
而http的状态码由3位数字组成
1XX 表示信息类
2XX成功 列如 200
3XX重定向，表示请求没有成功，客户端必须采取措施了
4XX客户端错误 404 not found
5XX服务端错误
我们要使用Ajax要依赖于XMLHttpRequest（XHR）;
var request;
if(window.XMLHttpRequest){
var request=new XMLHttpRequest//实例化
}else{
request=new ActiveXObject("Microsoft.XMLHTTP")//IE5、IE6
}
而XMLHttpRequest发送请求：
open(method,url,async)
send(string)
例如：request.open("GET","get.php",true);
request.send();
例如：requeat.open("POST","post.php",true)
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=张三&age=23");
XMLHttpRequest取得响应
responseText:获得字符串形式的响应数据
requestXML获得XML形式的响应数据
status和statusText：以数字和文本形式返回HTTP状态码
getAllResponseHeader()获取所有的响应报头
getResponseHeader()查询响应中的某个字段的值
对服务器的响应做一个监听:
var request=new XMLHttpRequest()
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
if(requeat.readyState===4&&request.status===200){
// some code request.responseText
}
}
我们在浏览器端发送一个请求到服务端，那么我们的数据就是从后端来的，所以我们要想实现一个完整的AJax请求，还得建立一个后端的文件，这里我们使用php作为我们后端的语言。对于大部分的小白而言，配置一个php的环境不是件容易的事情，所以在这里，我们使用XAMPP这个集成环境。下载安装好以后我们只需要打开它里面的Apache即可，因为我们就是模拟一下，所以不用数据库来操作数据。下面我们放一个例子:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
<style>
h3,input,label,button,p{
margin: 0;
padding: 0;
}
input{
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3>查询员工信息</h3>
<label>请输入员工编号</label>
<input type="text" id="num1" />
<button id="btn1">查询</button>
<p id="p1">测试1</p>
<h3>新建员工信息</h3>
<label>员工姓名</label>
<input type="text" id="sname" /><br>
<label>员工编号</label>
<input type="text" id="snumber" /><br>
<label>员工性别</label>
<select name="" id="ssex">
<option value="men">男</option>
<option value="women">女</option>
</select><br>
<label>员工职位</label>
<input type="text" id="sjob" />
<button id="btn2">查询</button>
<p id="p2">测试2</p>
<script>
document.getElementById("btn1").onclick=function(){
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET","12021.php?number="+document.getElementById("num1").value,true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("p1").innerHTML=request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
}
document.getElementById("btn2").onclick=function(){
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
var data;
data="name="+document.getElementById("sname").value+"&number="+document.getElementById("snumber").value+"&sex="+document.getElementById("ssex").value+"&job="+document.getElementById("sjob").value;
request.open("POST","12021.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("p2").innerHTML=request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
}
</script>
</body>
</html>
php代码;
<?php
header("Content-Type:text/plain;charset=utf-8");
$staff=array(
array("name"=>"张三","number"=>"101","sex"=>"男","job"=>"总经理"),
array("name"=>"李四","number"=>"102","sex"=>"女","job"=>"秘书"),
array("name"=>"王五","number"=>"103","sex"=>"男","job"=>"文员")
);
if($_SERVER["REQUEST_METHOD"]=="GET"){
search();
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
create();
}
//搜索员工
function search(){
if(!isset($_GET["number"])||empty($_GET["number"])){
echo "参数错误";
return;
}
global $staff;//php在函数里面用全局变量要加global
$number=$_GET["number"];
$result="没有找到员工";
foreach($staff as $value){
if($number==$value["number"]){
$result="找到员工,员工编号:".$value["number"].",员工姓名:".$value["name"].",员工性别:".$value["sex"].",员工职位:".$value["job"];
break;
}
}
echo $result;
}
//创建员工
function create(){
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;
}
echo "员工:".$_POST["name"]." 信息保存成功";
}
?>
这里上面的html和php结合起来，就是一个简单的Ajax的小demo。值得注意的是，这里我是 用dw在xampp下建站的，如果出现中文字体乱码则修改浏览器的字符编码一致即可。之前在测试的时候，总是会有跨域错误的提示，莫名其妙的，后面去网上搜了一大堆才知道，我直接双击html文件打开的网页是一个类似于file:///E:/xampp12/htdocs/AjaxDemo/12021.html 这样的路径，我们要将其改成Localhost/AjaxDemo/12021.html即可。
当然这个小demo有可以更加优化的地方，就是使用json字符串的形式，这个我们下次再来说好了。
Ajax是异步的javascript和xml的缩写，异步的意思就是说我管我的，你管你的，你那里还在加载是不会影响我这边加载，而同步则是指我要是想加载的话，必须等到你那边加载好了以后才行。在说Ajax之前，我们有必要来了解一些其他的知识。
HTTP是一种无状态协议，就是指它每次请求传送结束以后都会清空，下一次还想传送的话就要重新建立连接，一个完整的http请求过程分为7个步骤
1.建立TCP连接
2.web浏览器向web服务器发送请求命令
3.web浏览器发送请求头
4.web服务器应答
5.web服务器发送应答头
6.web服务器向浏览器发送数据
7.关闭TCP连接
而一个http请求又可以分为4部分
1.http请求的方法或动作：get或者post
2.请求的url
3.请求头，包含一些客户端环境的信息
4.请求提，即请求的正文，表单信息等
而这里的get使用url来传递参数，一般2000个字符以内，post一般用于修改服务器上的资源，对所发送的信息数量没有要求
一个http响应一般由三部分组成：
1.一个由数字和文字组成的状态码，用来显示是成功还是失败
2.响应头
3.响应体
而http的状态码由3位数字组成
1XX 表示信息类
2XX成功 列如 200
3XX重定向，表示请求没有成功，客户端必须采取措施了
4XX客户端错误 404 not found
5XX服务端错误
我们要使用Ajax要依赖于XMLHttpRequest（XHR）;
var request;
if(window.XMLHttpRequest){
var request=new XMLHttpRequest//实例化
}else{
request=new ActiveXObject("Microsoft.XMLHTTP")//IE5、IE6
}
而XMLHttpRequest发送请求：
open(method,url,async)
send(string)
例如：request.open("GET","get.php",true);
request.send();
例如：requeat.open("POST","post.php",true)
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=张三&age=23");
XMLHttpRequest取得响应
responseText:获得字符串形式的响应数据
requestXML获得XML形式的响应数据
status和statusText：以数字和文本形式返回HTTP状态码
getAllResponseHeader()获取所有的响应报头
getResponseHeader()查询响应中的某个字段的值
对服务器的响应做一个监听:
var request=new XMLHttpRequest()
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
if(requeat.readyState===4&&request.status===200){
// some code request.responseText
}
}
我们在浏览器端发送一个请求到服务端，那么我们的数据就是从后端来的，所以我们要想实现一个完整的AJax请求，还得建立一个后端的文件，这里我们使用php作为我们后端的语言。对于大部分的小白而言，配置一个php的环境不是件容易的事情，所以在这里，我们使用XAMPP这个集成环境。下载安装好以后我们只需要打开它里面的Apache即可，因为我们就是模拟一下，所以不用数据库来操作数据。下面我们放一个例子:
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
<style>
h3,input,label,button,p{
margin: 0;
padding: 0;
}
input{
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3>查询员工信息</h3>
<label>请输入员工编号</label>
<input type="text" id="num1" />
<button id="btn1">查询</button>
<p id="p1">测试1</p>
<h3>新建员工信息</h3>
<label>员工姓名</label>
<input type="text" id="sname" /><br>
<label>员工编号</label>
<input type="text" id="snumber" /><br>
<label>员工性别</label>
<select name="" id="ssex">
<option value="men">男</option>
<option value="women">女</option>
</select><br>
<label>员工职位</label>
<input type="text" id="sjob" />
<button id="btn2">查询</button>
<p id="p2">测试2</p>
<script>
document.getElementById("btn1").onclick=function(){
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET","12021.php?number="+document.getElementById("num1").value,true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("p1").innerHTML=request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
}
document.getElementById("btn2").onclick=function(){
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
var data;
data="name="+document.getElementById("sname").value+"&number="+document.getElementById("snumber").value+"&sex="+document.getElementById("ssex").value+"&job="+document.getElementById("sjob").value;
request.open("POST","12021.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange=function(){
if(request.readyState===4){
if(request.status===200){
document.getElementById("p2").innerHTML=request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
}
</script>
</body>
</html>
php代码;
<?php
header("Content-Type:text/plain;charset=utf-8");
$staff=array(
array("name"=>"张三","number"=>"101","sex"=>"男","job"=>"总经理"),
array("name"=>"李四","number"=>"102","sex"=>"女","job"=>"秘书"),
array("name"=>"王五","number"=>"103","sex"=>"男","job"=>"文员")
);
if($_SERVER["REQUEST_METHOD"]=="GET"){
search();
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
create();
}
//搜索员工
function search(){
if(!isset($_GET["number"])||empty($_GET["number"])){
echo "参数错误";
return;
}
global $staff;//php在函数里面用全局变量要加global
$number=$_GET["number"];
$result="没有找到员工";
foreach($staff as $value){
if($number==$value["number"]){
$result="找到员工,员工编号:".$value["number"].",员工姓名:".$value["name"].",员工性别:".$value["sex"].",员工职位:".$value["job"];
break;
}
}
echo $result;
}
//创建员工
function create(){
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;
}
echo "员工:".$_POST["name"]." 信息保存成功";
}
?>
这里上面的html和php结合起来，就是一个简单的Ajax的小demo。值得注意的是，这里我是 用dw在xampp下建站的，如果出现中文字体乱码则修改浏览器的字符编码一致即可。之前在测试的时候，总是会有跨域错误的提示，莫名其妙的，后面去网上搜了一大堆才知道，我直接双击html文件打开的网页是一个类似于file:///E:/xampp12/htdocs/AjaxDemo/12021.html 这样的路径，我们要将其改成Localhost/AjaxDemo/12021.html即可。
当然这个小demo有可以更加优化的地方，就是使用json字符串的形式，这个我们下次再来说好了。
0 0
- Ajax如何使用的小demo
- ajax小的DEMO
- hibernate如何使用小demo
- Ajax 异步小demo
- 第一个ajax小demo
- Ajax的使用小示例
- ajax---简单使用Demo
- jquery ajax 使用demo
- 使用onMeasure和onLayout的小Demo
- 简单的Android RecyclerView 使用小Demo
- alibaba.fastjson的使用小demo
- unittest使用小demo
- 配置hbm的hibernate小demo（入门级小案例ajax+struts2.0+hibernate3.0）
- 如何使用Github上下载的Demo
- JAVA中如何使用boolean的Demo
- Ajax 小 Demo 集合（一）
- 使用Yii2 PHPExcle +ajax 导入Excle的demo
- 使用ajax遇到的一些小问题
- mysql 设置主键和默认值
- Linux权限管理命令详解
- java中float 和double的区别
- Sping-核心API
- winbug分析dmp文件
- Ajax如何使用的小demo
- 工作中小问题小结
- Android开发之SQLite数据库
- C程序设计 例题 判读某一年是否为闰年（4）
- Linux状态监测
- #SQL中进行最大公约数和最小公倍数的sql
- java加载properties文件的六种基本方式
- 机器学习 vs. 深度学习
- train model note
