基础学习路径
AJAX是Asynchronous javascript and xml 的缩写,表示异步javascript 和 xml ,是一种交互式网页应用开发技术。
AJAX是一些老技术的新应用, 应用到了html css javascript dom , 以XMLHttpRequest为技术核心实现网页异步数据传输。
最大特点就是:网页不用刷新进行数据传输
用户注册
AJAX分页效果
图片加载瀑布流效果
传统的数据提交方式
AJAX数据提交方式
通过上述对比,客户端用户部分减少了2个流程,交给了ajax去处理,那么就减少了用户的等待时间,用户体验大大的提升
减少服务器带宽,按需获得数据
注意:在一些有列表展示功能的地方优势特别突出
无刷新更新页面,减少用户的实际和心理等待时间
注:用户注册,用户登录。多数据信息的展示
更好的用户体验,传统数据提交会刷新页面,易丢失用户填写数据
主浏览器都支持
XHR = new XMLHttpRequest();
创建请求头使用OPEN,主要实现(请求类型,请求地址)
对象.open(请求类型GET/POST,请求地址,[同步true/异步false]);
默认:同步 True
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo.php');主要实现请求服务器操作
对象.send(POST请求则填写POST的数据/GET请求可以不用写);
【HTML代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
</script>
【PHP代码】
<?php
echo 'test';脚下留心:
一定要在服务器目录下面运行AJAX-发送请求.html,不能直接用浏览器浏览该文件
对象.responseText (获取服务器响应的字符串数据)
对象.responseXML(获取服务器响应的xml数据)
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
//alert返回的数据
alert(XHRObj.responseText);
</script>案例运行结果
脚下留心:无法响应数据
原因:在AJAX没有完成请求这个时候是没有返回值的,所以获取数据是没有结果的。
解决方法:通过判断reaystate == 4 是否AJAX请求完成
Onreadystatechange 作用:ajax在请求的过程中发生任何状态的变化都会调用该方法
Readystate 作用:返回ajax的请求状态
状态说明:
最终代码:以及结果
思考:为什么没有打印0~4
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
console.log(XHRObj.readyState);
//发送请求
XHRObj.send();
//当请求状态发送变化时ajax会自动调用该方法onreadystatechange
XHRObj.onreadystatechange=function(){
console.log(XHRObj.readyState);
if(XHRObj.readyState==4){
console.log(XHRObj.responseText);
}
}
console.log(XHRObj.readyState+'sdf');
</script>说明:
程序是从上往下进行的, 里面的代码是等发送异步请求完了才去执行的。
状态0是无法获取的,因为实例化AJAX的对象,然而监听需要对象对象里面的属性来完成,所以0装就是实例化对象的时候。
思考:避免接口写错
例如:
在实际使用中,我们为了只有在请求的接口正确的时候获取相应的数据,一般我们要判断返回的HTTP状态是否正确,
使用:
对象.status == 200
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo1.php');
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
// console.log(XHRObj.readyState);
//发送请求
XHRObj.send();
//当请求状态发送变化时ajax会自动调用该方法onreadystatechange
XHRObj.onreadystatechange=function(){
// console.log(XHRObj.readyState);
if(XHRObj.readyState == 4 && XHRObj.status == 200){
console.log(XHRObj.responseText);
}
// else{
// //以邮件或者短信的形式发送通网站管理员
// alert('服务器错误,很忙......');
// }
}
// console.log(XHRObj.readyState+'sdf');
</script>判断用户名admin是否存在,当存在的时候返回【不可用】,当不存在的时候返回【可用】
明确需求:
第一步:给按钮增加点击事件
第二步:获取用户输入的值username
第三步:使用AJAX将内容发送给服务器端PHP文件
第四步:编写PHP文件checkuser.php 判断用户是否存在,返回结果
第五步:将PHP返回的结果弹出来
<!--
第一步:给按钮增加点击事件
第二步:获取用户输入的值username
第三步:使用AJAX将内容发送给服务器端PHP文件
第四步:编写PHP文件checkuser.php 接受参数,并且判断用户是否存在,返回结果
第五步:将PHP返回的结果弹出来
-->
<script type="text/javascript">
//按钮绑定事件,给input增加ID属性
var checkObj = document.getElementById('check');
checkObj.onclick = function(){
var username = document.getElementById('username').value;
//创建ajax对象
var XHRObj = new XMLHttpRequest();
//创建请求头,设置请求发送的地址和类型,并且将参数传递给服务端
XHRObj.open('get','check.php?username='+username);
//获取服务器端返回的数据
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
alert(XHRObj.responseText);
}
}
//发送请求
XHRObj.send();
}
</script><?php
//定义一个用户数组
$user = array('admin','xiaoming','xiaohong','xiaoqiang');
//获取传递的参数
$username = $_GET['username'];
//判断用户是否存在在数组中
if(in_array($username,$user)){
echo '不可用';
}else{
echo '可用';
}进化版本
1)进化要求
当用户名可用的时候后面增加√说可用,当用户名不可用的时候出现一个×提示当前用户名太火,请换一个
HTML代码
<style>
.error{
color: red;
font-size: 14px;
}
.green{
color: green;
font-size: 14px;
}
</style>
<body>
<!-- <span class="error">×此用户名太首欢迎,请换一个</span>-->
<!-- <span class="green">√恭喜你,该用户可用</span>-->
<table border="1">
<th colspan="2">用户注册</th>
<tr>
<td><input id="username" name="username" type="text"/><div id='error'></div></td>
<td><input id="check" type="button" value="检测用户"/></td>
</tr>
</table>
</body>
<!--
第一步:给按钮增加点击事件
第二步:获取用户输入的值username
第三步:使用AJAX将内容发送给服务器端PHP文件
第四步:编写PHP文件checkuser.php 接受参数,并且判断用户是否存在,返回结果
第五步:将PHP返回的结果弹出来
-->
<script type="text/javascript">
//按钮绑定事件,给input增加ID属性
var checkObj = document.getElementById('check');
checkObj.onclick = function(){
var username = document.getElementById('username').value;
//创建ajax对象
var XHRObj = new XMLHttpRequest();
//创建请求头,设置请求发送的地址和类型,并且将参数传递给服务端
XHRObj.open('get','check.php?username='+username);
//获取服务器端返回的数据
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
// alert(XHRObj.responseText);
if(XHRObj.responseText =='可用'){
document.getElementById('error').innerHTML='<span class="green">√恭喜你,该用户没有被注册</span>';
}else{
document.getElementById('error').innerHTML=' <span class="error">×此用户名太首欢迎,请换一个</span>';
}
}
}
//发送请求
XHRObj.send();
}
</script>数据方面:GET受浏览器的影响
POST 原则上是不受限制的,可以通过PHP配置POST_MAX_SIZE进行更改
安全方面:POST比GET要安全
文件上传:GET不能进行文件上传
说明:在请求地址后面增加参数,例如:demo.php?a=111&b=222&c=333
【HTML代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头,请求方式,请求链接
XHRObj.open('get','test.php?a=111&b=222&c=333');
//发送请求
XHRObj.send();
</script>
【PHP代码】
<?php
var_dump($_GET);Open(‘POST’,请求地址);
设置发送的数据格式,采用URL编码格式
对象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);
对象.send(发送的数据);
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
XHRObj.onreadystatechange = function() {
if (XHRObj.readyState == 4) {
alert(XHRObj.responseText);
}
}
//创建请求头,请求方式,请求链接
XHRObj.open('post','test.php');
//发送post的数据
var postData = 'name=123123&age=rrr';
//设置数据编码格式,使用URL编码格式
XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//发送请求
XHRObj.send(postData);
</script>【PHP代码】
<?php
var_dump($_POST);
效果
4.练习:表单无刷新数据录入
同步:等待服务器响应完成在执行下一段JS代码 (阻塞模式)
异步:不等服务器响应完成直接执行下一段JS代码(非阻塞模式)
设置open(方式,请求地址,false/同步);
HTML【代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo.php',false);
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4){
console.log('111');
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
console.log('js执行完成');
</script>【PHP代码】
为了增加延迟效果使用sleep
<?php
sleep(8);
echo 'test';【HTML代码】
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','demo.php');
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4){
console.log('111');
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
console.log('js执行完成');
</script>【PHP代码】
<?php
sleep(8);
echo 'test';我们再浏览一些网站的时候浏览器为了方便用户再次访问的时候增加用户访问体验会将一些静态资源文件缓存到本地
缓存的位置在:
选中IE浏览器右键
打开
静态缓存目录就出现再这里面了
说明:IE存在缓存
代码设置:?t=Math.random()
缺点:
1.不能保证URL绝对唯一
2.产生大量缓存文件
代码设置:?t=new Date().getTime(); //取得毫秒时间戳
优点:保证URL绝对唯一
缺点:依然产生大量缓存文件
代码设置:对象.setRequestHeader("If-Modified-Since","0");
原理分析:
If-Modified-Since是标准的HTTP请求头标签,在发送HTTP请求时,把浏览器端缓存页面的最后修改时间一起发到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。
如果时间一致,那么返回HTTP状态码304(不返回文件内容),客户端接到之后,就直接把本地缓存文件显示到浏览器中。
如果时间不一致,就返回HTTP状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示到浏览器中。
代码设置:header("Cache-Control: no-cache, must-revalidate");
原理分析:
利用php的header函数向响应头中写数据,写的是告诉客户端:不要对本次的结果进行缓存。
这种做法,可以从根本上解决缓存问题,不产生任何缓存文件。
普通字符串文本格式:responseText
XML数据格式:responseXML
JSON 字符串数据格式:responseText (在实际工作中用到最多,最广泛的格式)
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','text.php');
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
document.getElementById('content').innerHTML=XHRObj.responseText;
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
</script>
<body>
<div id="content"></div>
</body><?php
echo '<h1>返回的文本</h1>';
最终效果
<script type="text/javascript">
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//创建请求头
XHRObj.open('GET','xml.php');
//时时监控
XHRObj.onreadystatechange = function(){
if(XHRObj.readyState == 4 && XHRObj.status == 200){
var xmlObj = XHRObj.responseXML;
//以前获取html文档我们使用 document.getElementByTagName()
books = xmlObj.getElementsByTagName('book');
for(i=0;i<books.length;i++){
//获取第二级的值我们使用childen 方法
for(j=0;j<books[i].children.length;j++){
console.log(books[i].children[j].innerHTML);
}
}
}
}
//发送请求 对象.send(POST请求则填写POST的数据/GET请求可以不用写);
XHRObj.send();
</script>1.2PHP代码
首先确保PHP写的xml文件能再浏览器端访问
<?php
header('Content-Type:text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8"?>
<books>
<book>
<name>西游记</name>
<price>50.12</price>
</book>
<book>
<name>三国演义</name>
<price>876.12</price>
</book>
</books>
';JSON(javascript Object Notation js 对象标记) 是一种轻量级的数据交换格式。
数据格式比较简单,易于读写, 格式都是压缩的,占用带宽小
易于解析这种语言,客户端JavaScript可以简单的通过eval()进行JSON数据的读取
因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护
PHP端生成JSON数据使用:json_encode(数组数据格式);
PHP端解析JSON数据使用:json_decode(待解码数据,true/false);
说明:false 解码出来的数据是一个对象,true,解码出来的是一个数组
由于我们返回值的处理使用的是responseText 格式
语法格式:JSON.parse(字符串);
作用:从一个字符串中解析出json数据对象
前提:字符串必须是json格式的字符串
用户会员注册功能,用户填写好根据规则进行验证,如果验证成功提示用户注册成功。
验证规则:
1.用户名不能为空
2.用户名必须是由数字和字母组成,而且是在6~8位之间
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>AJAX-用户注册</title>
</head>
<style>
dd{float: left;}
</style>
<body>
<div>
<dl>
<dd>用户名</dd>
<dd><input type="text" name="username" id="username"></dd>
<dd><input type="button" id="regbtn" value="注册"></dd>
</dl>
</div>
</body>
<script type="text/javascript">
//给注册按钮增加click事件
var regbtn = document.getElementById('regbtn');
regbtn.onclick = function(){
//获取用户输入的值
var username = document.getElementById('username').value;
//创建AJAX对象
var XHRObj = new XMLHttpRequest();
//打开对象
XHRObj.open('get','reg.php?username='+username);
//实时监控AJAX运行状态
XHRObj.onreadystatechange = function(){
//判断服务器是否响应成功
if(XHRObj.readyState==4 && XHRObj.status == 200){
//将json数据转换成对象
jsonObj = JSON.parse(XHRObj.responseText);
//判断用户是否操作成功进行页面跳转
if(jsonObj.state ==1){
location.href='success.html';
}else{
alert(jsonObj.msg);
}
}
}
//发送请求
XHRObj.send();
}
</script>
</html>关于ajax的详细介绍请读者自行百度或者参考http://theodor.top/article/26中的“ajax”一节。
简单的来说,ajax请求返回的是一串组织好的数据。浏览器会在符合条件(js脚本)的情况下发送一系列符合条件的链接,来向服务器请求更新一组数据。服务器发送数据后,浏览器直接在当前页面改写DOM,达到不跳转链接进行更新的目的。
很多网站利用ajax对页面进行美化处理,同时也能节省服务器的带宽。
有时候我们需要在资讯网站上爬取较多信息,而这些信息正常情况下需要用户不断在浏览器界面做出动作(大多数情况下这个动作是下拉滚动条)才能加载。如果使用selenium等无界面浏览器爬取则太耗时间,使用常规爬虫库则无法对爬取下来的html页面做出动作(也就是激活js)。所以我们需要绕过动作,直接对ajax请求进行爬取,达到快速准确获取数据的目的(事实上,ajax请求返回的数据一般都十分易读,因为没有html的干扰,但也不排除存在直接返回一段html的网站,比如百度贴吧)。
本节我们以微博为例。
我们可以用两种方式获取ajax链接:第一种是分析原页面的script文件找到发送ajax请求的代码;第二种是直接通过工具截取网页发送的ajax请求url,分析其规律并仿写。
其中,分析script脚本是十分不推荐采取的方法,因为网站开发者通常会将js脚本写成十分不友好的形式(请想象一堆var abcdefg出现在你面前,js甚至不用声明变量类型)。但在穷途末路或者爬取者本身有兴趣的情况下也不是不能一试。
第二种方法中的工具可以用浏览器自带的开发者工具(F12),当然想用Fiddler等也不是不可以,重要的是结果不是过程。在待爬取页面按下F12键打开开发者工具,然后点击标签“Network”,将浏览的类别调整到“XHR”(XMLHTTPRequest,这是ajax专有的数据格式):
不断下拉滚动条,会发现XHR区域多了很多内容。观察可以得知它们是一系列GET请求,且其请求参数为ajwvr、category、page、lefnav、cursor、rnd。变动的参数为:page,其每次请求+1,推测为请求页数;rnd,可知其为请求发出的时间戳。
json全称JavaScript Object Notation,是一种数据格式。大多数情况下,你可以将json数据看做字典。
浏览器向服务器发送ajax请求后,服务器会返回一组json数据,浏览器根据此json更新页面。在绕过浏览器直接发送ajax请求时,服务器返回的json数据自然也由我们自行解析。
在已经拿到ajax请求的浏览器开发者工具下,双击ajax请求连接,在展开的窗口中选择Response,可以看到微博服务器端返回的json数据:
其具体的json返回形式如下,其中data为其返回的html文本:
{"code":"100000","msg":"","data":" <!--\u699c\u5355\u680f\u4f4d\u7f6e-->\n <div…(略)"}
可知我们需要的数据在data键内,其为html文本段。
import requests
import time
import datetime
page=2
#分析得知ajax请求的page从2开始(因为page1在打开页面的时候就已经加载到文档里)
lefnav=0
category=0
ajwvr=6
cursor=""
#其余的参数,其意义可以忽略
url="https://weibo.com/a/aj/transform/loadingmoreunlogin?"
#通过分析之前浏览器发出的ajax请求,可得知微博使用的时间戳为毫秒级时间戳
def getrnd():
return round(time.time()*1000)
def geturl():
global page #我们要修改page,就要声明为全局变量
page=page+1
return url+"ajwvr="+str(ajwvr)+"&category="+str(category)+"&page"+str(page-1)+"&cursor="+cursor+"&_rnd="+str(getrnd())
response=requests.get(geturl())
print(response.text)当然,此处的ajax请求采取了GET的方式,但也有采取POST方式并且要求携带cookie的ajax请求。对于这种情况可以采用设置POST字典的方式。在真正的情况中也会有很多猜不出ajax请求参数的情况,这就需要读者因地制宜随机应变了。但ajax请求的精髓已经被我们讲解过了,无论有多少分支,都不过万变不离其宗耳。
是我的一家之见,若有疏漏还请一笑而过。
其实除了ajax,网页上几乎所有的页面都可以通过找到url->分析参数->伪装请求的方式来爬取。比如说搜索框的操作可以通过向搜索框跳转的链接发送请求来模拟,按钮按下可以通过向按钮绑定的链接发送请求来模拟。这是因为互联网的本质是数据与地址的组合,无论它们有多么华丽,终究也不过是一堆数据。发送请求的主动权在我们手上,只要分析手头的数据,可以说没有什么请求是伪装不了的(当然,我是指你本人使用浏览器可以做出的请求)。
近项目上用到了调用微信和支付宝的第三方支付接口,因为以前没用过,所以这次用到了之后总结一下分享给大家,这里介绍两种支付方式,即app支付和扫码支付方式。
一、app支付(这里只介绍java端调用支付,安卓或ios端自己参考相关的调用文档)
首先可以看一看项目支付流程(图解)
1. 在页面上选择支付方式(微信或支付宝)
2. 由相应的客户端调用相应的支付方式进入相应的支付页面(安卓或ios调用支付接口并进入微信或支付宝支付页面,显示支付的信息)
3. 输入密码进行支付
4. 调用支付结果接口,来返回支付成功与否
四图分别是选择支付方式、微信支付页面、支付宝支付页面、微信支付结果(成功)页面
也是基本的支付三个步骤。
一、先看微信支付:
在调用微信支付之前你应该已经下单成功(即订单信息入库成功),这里需要几个值:
OrderName(订单名称),orderNumber(订单编号,唯一),amount(金额), prepayId(交易会话id)
前三个参数直接从数据库里获取。prepayid是什么?可以具体看微信支付文档,我们可以从下单接口中返回获得这个会话id并且需要入库,这个参数最重要的作用是用于第一次我们没有支付,但已经生成了一个待支付的订单。这种情况下我们不需要再次去调用下单接口返回prepayId,因为我们已经生成过了这个值
下面看手机端页面的js代码:
*请认真填写需求信息,我们会在24小时内与您取得联系。