一、Ajax简介
概念：异步的JavaScript和XML
作用：无刷新页面
网站运行原理：
1、服务器端
2、客户端
3、请求
4、响应
网站开发技术：
1.php—————-xxxx.php
2.java(j2ee)———xxxx.jsp
3.c#(asp.net)————xxxx.aspx
提交请求方式：
1.get：明文、安全性低
2.post：加密、安全性高
网络通信方式：
1.同步通信（false）：同时只能由一个人访问、速度慢、安全性高
2.异步通信（true）：可以有多个人访问、速度快、安全性低
url传参
xxxx.php？名=值&名=值
HTTP状态码：request.status
200：成功
403：服务器端无响应
404：请求的页面未找到
500：服务器内置错误
二、get请求
<!DOCTYPE html><html><head><title>Ajax查询城市名称_get请求</title><meta charset="utf-8" /><script type="text/javascript">//定义ajax浏览器对象var request;//ajax通过区号，查询城市名称function showCity(){//创建ajax浏览器对象if(window.ActiveXObject){//为了兼容IE6及更低版本浏览器request = new ActiveXObject("Microsoft.XMLHTTP");}else{//目前高版本浏览器request = new XMLHttpRequest();}//指定接收响应结果的函数request.onreadystatechange = function(){//判断ajax请求状态、http状态if(request.readyState == 4 && request.status==200){//接收响应结果document.getElementById("div1").innerHTML = request.responseText;}};//指定ajax服务器端处理页面var cityCode = document.getElementById("cityCode").value;request.open("get","res/htmlclassics/php/city.php?id="+Math.random()+"&cityCode="+cityCode,true);//发送请求request.send(null);}</script></head><body><h2>通过区号查询城市名称</h2><br/><br/><b>城市区号：</b><input type="text" id="cityCode" size="20" /><input type="button" value="查询" onclick="showCity()" /><br/><br/><div id="div1" style="color:red;font-weight:bold;font-size:20px;"></div></body></html>
三、post请求
1、指定服务器端处理页面
open()方法
open(请求的类型,地址,布尔值)
参数
请求的类型：GET 或 POST
地址：服务器上文件的地址
布尔值：true（异步）或 false（同步）;
功能
规定请求的类型、URL 以及是否异步处理请求。
2、设置请求头信息
setRequestHeader()方法
基本语法
setRequestHeader(“content-type”,”编码类型”);
功能
用于指定传输数据编码类型，即服务器需要我们传送的数据类型。
如：application/x-www-form-urlencoded的编码方式。
3、发送请求
send()方法
基本语法
send(变量名=值&变量名=值……);
功能
将请求发送到服务器。
get与post比较：
get请求：使用url传参数明文、相对安全性低。
post请求：数据加密提交，相对安全性高。
在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
4、示例
<!DOCTYPE html>
<html>
<head>
<title>Ajax手机号归属地查询_post请求</title>
<meta charset="utf-8" />
<script type="text/javascript">
//定义ajax浏览器对象
var request;
//ajax通过手机号，查询归属地
function showMsg(){
//创建ajax浏览器对象
if(window.ActiveXObject){
//为了兼容IE6及更低版本浏览器
request = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
//目前高版本浏览器
request = new XMLHttpRequest();
}
//指定接收响应结果的函数
request.onreadystatechange = function(){
//判断ajax请求状态、http状态
if(request.readyState == 4 && request.status==200){
//接收响应结果
document.getElementById("div1").innerHTML = request.responseText;
}
};
//指定ajax服务器端处理页面
request.open("post","res/htmlclassics/php/tel.php",true);
//设置请求头信息
request.setRequestHeader("content-type","application/x-www-form-urlencoded");
//发送请求
var tel = document.getElementById("tel").value;
request.send("id="+Math.random()+"&tel="+tel);
}
</script>
</head>
<body>
<h2>手机号归属地查询</h2>
<br/><br/>
<b>手机号码：</b>
<input type="text" id="tel" size="20" />
<input type="button" value="查询" onclick="showMsg()" />
<br/><br/>
<div id="div1" style="color:red;font-weight:bold;font-size:20px;"></div>
</body>
</html>
四、josn数据
作用：
存储多个数据
定义语法格式：
var json对象名= { };
或
var json对象名 = {“名”：”值”，”名”：”值”};
存储数据：
json对象名 . 名 = 值；
取值：
var 变量 = json对象名 . 名
json数组：
var arr=[ { },{ },{ }];
系统函数：
1、将指定的字符串，转换为json对象
JSON.parse();
2、将json对象转换为字符串
JSON.stringify();
示例一：
<!DOCTYPE html>
<html>
<head>
<title>Ajax查询用户信息_json数据处理</title>
<meta charset="utf-8" />
<style type="text/css">
.head{
position:relative;
border:2px solid #CC0001;
width:500px;
margin:50px auto 0px auto;
}
.title{
background-color:#CC0001;
width:100%;
line-height:30px;
font-size:15px;
color:#ffffff;
}
.search{
width:100%;
text-align:center;
line-height:50px;
}
.preh{
height:290px;
}
.lines{
display:flex;
justify-content:flex-start;
}
.lines div{
height:30px;
line-height:30px;
}
.lines div:nth-of-type(1){
width:70px;
text-align:center;
}
#photo{
position:absolute;
right:5px;
top:35px;
width:200px;
height:250px;
border:1px solid gray;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
</style>
<script type="text/javascript">
//定义ajax浏览器对象
var request;
//ajax通过姓名，查询详细信息
function getUserInfo(){
//创建ajax浏览器对象
if(window.ActiveXObject){
//为了兼容IE6及更低版本浏览器
request = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
//目前高版本浏览器
request = new XMLHttpRequest();
}
//指定接收响应结果的函数
request.onreadystatechange = function(){
//判断ajax请求状态、http状态
if(request.readyState == 4 && request.status==200){
//接收响应结果，并转换为json对象
var user = JSON.parse(request.responseText);
//将响应结果显示到页面
document.getElementById("userName").innerHTML = user.userName;
document.getElementById("sex").innerHTML = user.sex;
document.getElementById("age").innerHTML = user.age;
document.getElementById("address").innerHTML = user.address;
document.getElementById("star").innerHTML = user.star;
document.getElementById("photo").style.backgroundImage = "url('"+user.photo+"')";
}
};
//指定ajax服务器端处理页面
request.open("post","res/htmlclassics/php/user.php",true);
//设置请求头信息
request.setRequestHeader("content-type","application/x-www-form-urlencoded");
//发送请求
var userName = document.getElementById("user_name").value;
request.send("id="+Math.random()+"&userName="+userName);
}
</script>
</head>
<body>
<div class="head">
<div class="title">用户信息查询</div>
<div class="search">
请选择：
<select id="user_name">
<option value="林俊杰">林俊杰</option>
<option value="周杰伦">周杰伦</option>
<option value="戚薇">戚薇</option>
<option value="李健">李健</option>
<option value="邓紫棋">邓紫棋</option>
<option value="朴树">朴树</option>
<option value="陈伟霆">陈伟霆</option>
<option value="杨幂">杨幂</option>
<option value="胡歌">胡歌</option>
<option value="靳东">靳东</option>
</select>
<input type="button" value="查询" onclick="getUserInfo()" />
</div>
</div>
<div class="head preh">
<div class="title">查询结果</div>
<div class="lines">
<div>姓名：</div>
<div id="userName"></div>
</div>
<div class="lines">
<div>性别：</div>
<div id="sex"></div>
</div>
<div class="lines">
<div>年龄：</div>
<div id="age"></div>
</div>
<div class="lines">
<div>地址：</div>
<div id="address"></div>
</div>
<div class="lines">
<div>星座：</div>
<div id="star"></div>
</div>
<div id="photo"></div>
</div>
</body>
</html>
示例二：
<!DOCTYPE html>
<html>
<head>
<title>Ajax查询用户信息_json数据处理</title>
<meta charset="utf-8" />
<style type="text/css">
.head{
position:relative;
border:2px solid #2e79c7;
width:500px;
margin:50px auto 0px auto;
}
.title{
background-color:#2e79c7;
width:100%;
line-height:30px;
font-size:15px;
color:#ffffff;
}
.search{
width:100%;
text-align:center;
line-height:50px;
}
.preh{
height:290px;
}
.lines{
display:flex;
justify-content:flex-start;
}
.lines div{
height:30px;
line-height:30px;
}
.lines div:nth-of-type(1){
width:100px;
text-align:left;
}
</style>
<script type="text/javascript">
//定义ajax浏览器对象
var request;
var result = {};
//ajax通过姓名，查询详细信息
function getCityInfo(){
//补全ajax代码
if(window.ActiveXObject){
request = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
request = new XMLHttpRequest();
}
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
result=JSON.parse(request.responseText);
var a=0;
for(var i=0;i<result.length;i++){
a+=result[i];
}
document.getElementById("result").innerHTML=a;
}
}
request.open("post","res/htmlclassics/php/test_city.php",false);
request.setRequestHeader("content-type","application/x-www-form-urlencoded");
var number = document.getElementById("number").value;
request.send("number="+number);
}
</script>
</head>
<body>
<div class="head">
<div class="title">代号查询</div>
<div class="search">
请选择：
<select id="number">
<option value="汽车">汽车</option>
<option value="食品">食品</option>
<option value="数码">数码</option>
<option value="服饰">服饰</option>
</select>
<input type="button" value="查询" onclick="getCityInfo()" />
</div>
</div>
<div class="head preh">
<div class="title">计算结果</div>
<div class="lines">
<div>结果：</div>
<div id="result"></div>
</div>
</div>
</body>
</html>
若有收获，就点个赞吧
0 人点赞
