原生Ajax详解
程序员文章站
2022-07-10 11:38:39
原生Ajax发送请求： 1.创建XMLhttpRequest对象 ie中为ActiveXobject("Microsoft.XMLHTTP") 早期的ie浏览器 2.准备发送 3.执行发送动作 4.指定回调函数 案例： 1.html文件 2.PHP文件 1.get get请求参数在url中传递 2. ......
原生ajax发送请求：
1.创建xmlhttprequest对象
ie中为activexobject("microsoft.xmlhttp") 早期的ie浏览器
2.准备发送
3.执行发送动作
4.指定回调函数
案例：
1.html文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识 ajax</title>
<script>
window.onload = function(){
var btn = document.getelementbyid('btn');
btn.onclick = function(){
var uname = document.getelementbyid('username').value;
var pw = document.getelementbyid('password').value;
//使用ajax
//1.创建xmlhttprequest对象
var xhr = new xmlhttprequest();
//2.准备发送
xhr.open('get','./check.php?username='+uname+'&password='+pw,true);
//3.执行发送动作
xhr.send(null);
//4.指定回调函数
xhr.onreadystatechange = function(){
if(xhr.readystate == 4){
if(xhr.status == 200){
var data = xhr.responsetext;
var info = document.getelementbyid('info');
if(data == 'ture'){
info.innerhtml = 'success';
}else if(data == 'false'){
info.innerhtml = 'false';
}
}
}
}
}
}
</script>
</head>
<body>
<form >
用户名:<input type="text" id="username" /><span id="info"></span><br />
密 码:<input type="text" id="password" />
<input type="button" value="登录" id="btn" />
</form>
</body>
</html>
2.php文件
<?php
$uname = $_get['username'];
$pw = $_get['password'];
if($uname == 'admin' && $pw == '123'){
echo 'ture';
}else{
echo "false";
}
?>
1.get
get请求参数在url中传递
2.post
post请求参数在请求体重传递
案例:
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#dv{
width: 360px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
<script src="../jquery-1.12.2.js"></script>
<script>
/*
*功能：
*页面输入图书编号，查询服务器端的图书信息并解析
*
*/
$(function(){
$('#btn1').click(function(){
var code = $('#code').val();
$.ajax({
type:'get',
url:'02.php',
data:{code:code},
datatype:'json',
success:function(data){
var info = document.getelementbyid('info');
if(data.flag == 0){
info.innerhtml = 'not find book';
}else{
var tag = '<ul><li>bookname:'+data.bookname+'</li><li>autor:'+data.autor+'</li></ul>';
info.innerhtml = tag;
}
},
error:function(){
$('#info').html('server error');
};
});
});
});
</script>
</head>
<body>
<div id="dv">
<div>
booknumber：<input type="text" name="code" id="code"/>
<input type="button" value="select" id="btn1"/>
</div>
<div id="info"></div>
</div>
</body>
</html>
2.php
<?php
$code = $_get['code'];
$books = array();
$books['sgyy'] = array('bookname'=>'三国演义','autor'=>'罗贯中');
$books['shz'] = array('bookname'=>'水浒传','autor'=>'施耐庵');
$books['xyj'] = array('bookname'=>'西游记','autor'=>'吴承恩');
$books['hlm'] = array('bookname'=>'红楼梦','autor'=>'曹雪芹');
if(array_key_exists($code, $books) == 1){//判断非空
$book = $books[$code];
echo json_encode($book);
}else{
echo '{"flag":0}';
}
?>
1.静态script标签src属性进行跨域请求
-<script type="text/javascript" src="文件地址"></script>
-默认为同步请求，加异步请求输入无法加载
-1.必须保证加载的顺序
-2.不方便通过程序传递参数
2.动态创建script标签，通过标签的src属性发送请求(jsonp本质)
-1.动态创建script标签是异步请求
-利用函数调用解决
-服务端响应的内容是函数调用
例如：
var script = document.createelement('script');
script.src = 'http://www.snake.com/ajax/demo/ajax20190403/test.php';
var head = document.getelementsbytagname('head')[0];
head.appendchild(script);
//服务器响应的内容调用
function foo(data){
console.log(data);
}
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢