原生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); }
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢