AJAX基础教程
Posted 想做你的编译器
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX基础教程相关的知识，希望对你有一定的参考价值。
get请求
php文件：checkUSerName.php
$username = $_GET['username'];if($username == "zhangsan"){echo "对不起，用户名已存在";}else{echo "该用户名可以注册";}
html文件 添加window.onload才可以通过id,class等获取到js代码以后的HTML元素
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>注册页面</title><!-- ajax文件(夹)名不能为中文,否则不能实现功能 --><script>window.onload = function(){var u = document.getElementById("username");var span = document.getElementById("span1");u.onblur = function(){var username = u.value;var xhr = new XMLHttpRequest();xhr.open("get","checkUserName.php?username="+username,true);//true 表示异步(不等待返回值)// 发送请求xhr.send(null);//get请求额 send参数为null// 获取返回值状态xhr.onreadystatechange = function(){// 获取返回值var result = xhr.responseText;span.innerHTML = result;}}}</script></script></head><body><form action="checkUserName.php" method="GET">用户名: <input type="text" name="username" id="username"><span id="span1"></span> <br/>密 码: <input type="text" id="password"> <br/><input type="submit"></form></body></html>
post请求（可以不需要form标签）
php文件：checkUSerName.php$username = $_POST['username'];if($username == "zhangsan"){echo "对不起，用户名已存在";}else{echo "该用户名可以注册";}
HTML文件 （兼容完善）
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>z注册页面</title><script>window.onload = function() {var func = document.getElementById("username");var span = document.getElementById("span1");func.onblur = function() {var username =func.value;// 第一步： 创建对象var xhr = null;if (window.XMLHttpRequest) { //如果有window下XMLHttpRequest对象xhr = new XMLHttpRequest();} else { //IE6及一下的版本没有XMLHttpRequest对象xhr = new ActiveXObject("Microsoft.XMLHTTP");}//第二步： 准备发送xhr.open("post", "checkUserName.php", true);var param = "username=" + username;// 设置xhr请求头信息： xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 第三步： 执行发送xhr.send(param);// 第四步： 处理请求// readyState : 0 表示xhr对象创建完成// 1 表示请求已经发送// 3 表示正在解析数据// 4 表示数据已经解析完成，可以使用了//xhr.status http常见响应状态码 :// 200表示响应成功 404表示资源没找到 500表示服务器内部错误xhr.onreadystatechange = function() {if (xhr.readyState == 4){if(xhr.status==200){var result = xhr.responseText;//有些数据是responseXMLspan.innerHTML = result;}}}}}</script></head><body>用户名: <input type="text" name="username" id="username"><span id="span1"></span> <br/></body></html>
同步请求
php文件 checkUSerName.php
sleep(5);//模拟网络延迟5s后再执行下面的代码$username = $_POST['username'];if($username == "zhangsan"){echo "对不起，用户名已存在";}else{echo "用户名可以注册";}
HTML文件
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>页面注册-同步请求</title><script>window.onload = function(){var username = document.getElementById("username");var span = document.getElementById("span1");username.onblur = function(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP");}console.log("--------1--"+xhr.readyState+"----------");//0xhr.open("post","checkUserName.php",false);//false 表示同步// 同步时在存在网络延迟的情况下，input输入框失去焦点后会卡在当前输入框，// 直到延迟(模拟5s)结束后才能继续进行其他操作console.log("--------2--"+xhr.readyState +"----------");//1var param = "username="+username.value;xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");console.log("--------3--"+xhr.readyState +"----------");//1xhr.send(param);var result = xhr.responseText;if(xhr.readyState == 4){if(xhr.status == 200){span.innerHTML = result;}}console.log("--------4--"+xhr.readyState+"----------");//4// xhr.onreadystatechange = function(){//可以看到前面readyState状态已经是4了// // 所以不会再执行回调函数了(state不会再change了)，所以应该下面的代码拿到回调函数 之前// console.log("--------5--"+xhr.readyState +"----------");// var result = xhr.responseText;// if(xhr.readyState == 4){// if(xhr.status == 200){// span.innerHTML = result;// }// }// }}}</script></head><body>用户名: <input type="text" id="username" name="username"> <span id="span1"></span><br>密 码: <input type="text"></body></html>
ajax-解析xml数据
getBookList.php文件
header('content-type:text/xml;charset=utf-8');//设置响应头信息 保证浏览器可以把相应的内容设置为xml文件类型$arr =array();$arr[0] = ["author"=>"施耐庵","name"=>"《水浒传》","desc"=>"108汉子"];$arr[1] = ["author"=>"吴承恩","name"=>"《西游记》","desc"=>"西天取经的故事"];include ("bookList.xml");//引入xml文件
bookList.xml文件
<bookList>foreach($arr as $k => $v){<book><author> echo $v['author']</author><name> echo $v['name'] </name><desc> echo $v['desc']</desc></book>}</bookList>
bookList.html文件
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>通过xml数据格式获取书单列表</title><script>window.onload = function(){var xhr = new XMLHttpRequest();xhr.open("get","getBookList.php",true);xhr.send(null);xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){var result = xhr.responseXML;var books = result.getElementsByTagName("bookList")[0].getElementsByTagName("book");var newHtml = document.getElementById("table").innerHTML;for(var i=0;i<books.length;i++){var itemBook = books[i];var author =itemBook.getElementsByTagName("author")[0].textContent;var name = itemBook.getElementsByTagName("name")[0].textContent;var desc = itemBook.getElementsByTagName("desc")[0].textContent;var tempHtml = "<tr><td>"+author+"</td><td>"+name+"</td><td>"+desc+"</td></tr>";newHtml+=tempHtml;console.log(newHtml);}document.getElementById("table").innerHTML = newHtml;}}}}</script><style>table{border:solid;margin: auto;width: 60%;text-align: center;border-collapse: collapse;/* border-spacing: 0; 或者此语句 也可以去掉表格外层边框*/}table tr th,td{border: solid 1px;border-collapse: separate;}</style></head><body><table id="table"><tr><th>作者</th><th>书名</th><th>描述</th></tr><tr><td>罗贯中</td><td>《三国演义》</td><td>一个战争征伐的年代</td></tr></table></body></html>
ajax-解析json数据格式
json数据可以放在php文件中或者php文件中，当然也可以直接在js文件中
js文件
var employees = [{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName": "Carter" }];
getStudent.php文件
[{:,:,:},{:,:,:}]student.json文件[{:,:,:},{:,:,:}]
studen.html文件
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>ajax解析json格式数据</title><style>table {border: solid 2px;border-collapse: collapse;margin: auto;width: 980px;text-align: center;}table th {border: solid;font-size: 30px;color: red;}table td {border: solid;}</style><script>window.onload = function() {var xhr = new XMLHttpRequest();xhr.open("get", "student.json", true);//第二个参数也可以是json格式的php文件xhr.send(null);xhr.onreadystatechange = function() {if(xhr.readyState == 4){if(xhr.status == 200){var result = xhr.responseText;var data = JSON.parse(result);// console.log(data);var newHtml = document.getElementById("table").innerHTML;for(var i=0;i<data.length;i++){var item = data[i];var name = item.name;var id = item.id;var sex = item.sex;// console.log(name);var tempHtml = "<tr><td>"+name+"</td><td>"+id+"</td><td>"+sex+"</td></tr>";newHtml+=tempHtml;}document.getElementById("table").innerHTML = newHtml;}}}}</script></head><body><table id="table"><tr><th>name</th><th>id</th><th>sex</th></tr><tr><td>1</td><td>2</td><td>3</td></tr></table></body></html>
jquery-ajax
<html><head><meta charset="utf-8"><title>用户注册界面</title><script type="text/javascript" src="./js/jquery-3.4.0.js"></script><script type="text/javascript">$(document).ready(function(){var username=document.querySelector("#username");$("#username").blur(function(){console.log("username");var usernameValue=username.value;var type="get";var url="checkUsername.php";var params="uname="+usernameValue;$.ajax({url:url,//被注释掉的都有默认值，可以不是必须得// type:type,data:{uname:usernameValue},// async:true,// dataType:"text",success:function(result){var spanResult=document.querySelector("#span01");if(result=="ok"){spanResult.innerText="可以注册";}else{spanResult.innerText="已注册";}}})})});</script></head><body>用户名：<input type="text" name="" id="username"><span id="span01"></span><br>邮 箱：<input type="text" name=""></body></html>
php文件
$uname=$_GET["uname"];if ($uname=="zhangsan") {echo "error";}else{echo "ok";}
同源策略
同源条件：域名，端口，协议(常见http和https协议)都相同
ajax是为获取自己服务器的数据
跨域是为了获取其他服务器的数据
跨域
html文件
跨域实现步骤一、定义传输数据方法(必须在引入文件前定义)<script>function foo(data){console.log(data);}</script>二、引入跨域文件，开始执行跨域文件内的方法src里包含的资源路径可以不是同源（可以使任何服务器的）<script src="param.php?name=zhangsan"></script>
param.php文件
$str = $_GET['name'];if($str == "zhangsan"){echo 'foo("成功")';//php文件中调用js方法// 这里不能直接 echo "成功";// 会报错param.php?name=zhangsan:1 Uncaught ReferenceError: 成功 is not defined}else{echo 'foo("失败")';}
跨域本质1-动态创建script标签
html文件
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body>跨域本质就是动态创建script标签<script>function foo(data){console.log(data);}</script><!-- <script ></script> --><script>window.onload = function(){var btn = document.querySelector("#btn");var head = document.querySelector("head");btn.onclick = function(){var cityName = document.getElementById("city").value;var script = document.createElement("script");script.src = "for_data.php?city="+cityName;head.appendChild(script);console.log(cityName);}}</script>请输入城市名称:<input type="text" id="city" ><button id="btn">查询</button></body></html>
for_data.php文件
$city = $_GET['city'];if($city == "beijing"){echo "foo('北京天气晴')";}else{echo 'foo("无此城市天气")';}
跨域本质2-动态指向回调函数
html文件
跨域本质 动态创建回调函数<script>window.onload = function(){var btn = document.querySelector("#btn");var head = document.querySelector("head");btn.onclick = function(){var cityName = document.getElementById("city").value;var script = document.createElement("script");script.src = "for_data.php?city="+cityName+"&callback=foo2";window["foo2"] = function(data){console.log(data);}head.appendChild(script);console.log(cityName);}}</script>请输入城市名称:<input type="text" id="city" ><button id="btn">查询</button>
php文件
$callback = $_GET['callback'];$city = $_GET['city'];if($city == "beijing"){echo $callback."('北京天气晴')";}else{echo $callback.'("无此城市天气")';}
jquery跨域
$.ajax({url:www...,//其他服务器接口地址data:{unname:"zhangsan",age:18,},success:function(data){console.log(data)},dataType:"jsonp",//跨域数据格式jsonp，JSON with Padding，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 jsonp:"cb",//回调函数名称，默认值是callbackjsonpCallback:"haha",//非必要，返回函数名称(或返回集合名称)，默认值是jQuery});
以上是关于AJAX基础教程的主要内容，如果未能解决你的问题，请参考以下文章
Spring MVC 3.2 Thymeleaf Ajax 片段