php输出
<?php
echo 1;
?>
php输出 html元素
<?php
header('Content-Type:text/html; charset=utf-8');
echo '<div style="color:red;"><span>测试数据</span><span>测试数据</span><span>测试数据</span></div>';
?>
输出 字符串 print_r ($arr)
<?php
$arr = array(123,456,789);
print_r ($arr);
?>
输出 字符串 print_r ($arr)
<?php
$arr = array('username'=>"李四",'age'=>12,'chilese'=>"120");
print_r($arr);
?>
json_encode($arr) 将数组或者对象转换为字符串
$arr = array();
$arr['123'] = array("username"=>"zhangsan","chinese"=>"130");
$arr['124'] = array("username"=>"lisi","chinese"=>"150");
$arr['125'] = array("username"=>"wangwu","chinese"=>"120");
$arr['126'] = array("username"=>"zhaoliu","chinese"=>"110");
$arr['127'] = array("username"=>"刘海","chinese"=>"110");
echo json_encode($arr);
?>
if语句
- url:‘http://www.school.com/第二章/data/data.php?flag=1’,
$f = $_GET['flag'];
if($f==1){
echo 123;
}else{
echo '456';
}
?>
初始ajax
<?php
$username = $_GET['username'];
$pw = $_GET['password'];
if($username=='admin' && $pw=='123'){
echo 1;
}else{
echo 2;
}
?>
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var username = document.getElementById('username').value;
var pw = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('get','./php/01check.php?username='+username+'&password='+pw,true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
var info = document.getElementById('info');
if(data==1){
info.innerText='登录成功';
}else if(data == 2){
info.innerText='登录失败';
}
}
}
}
}
}
</script>
初始ajax 浏览器适配 get
<?php
$uname = $_GET['username'];
$pw = $_GET['password'];
if($uname =='admin' && $pw == '123'){
echo 1;
}else{
echo $uname;
}
?>
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var uname = document.getElementById('username').value;
var pw = document.getElementById('password').value;
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft');
}
var parm = 'username='+uname+'&password='+pw;
xhr.open('GET','php/03get.php?'+encodeURI(parm),true);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText);
}
}
}
}
}
</script>
初始ajax 浏览器适配 post
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var username = getElementIdForValue('username');
var pas = getElementIdForValue('password');
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft");
}
var parm = 'username='+username+'&password='+pas;
xhr.open('POST','php/04post.php',false);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(parm);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
alert(xhr.responseText);
}
}
}
}
}
function getElementIdForValue(id){
return document.getElementById(id).value;
}
</script>
返回状态 readyState 详解
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var uname = document.getElementById('username').value;
var pw = document.getElementById('password').value;
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft");
}
console.log(xhr.readyState + '----------1-----------');
var param = 'username='+uname+'&password='+pw;
xhr.open('post','04post.php',true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(param);
console.log(xhr.readyState + '----------2-----------');
xhr.onreadystatechange = function(){
console.log(xhr.readyState + '----------3-----------');
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
}
}
</script>
XML 数据
/*
xml数据格式
元数据:描述数据的数据
这种数据格式的弊端:
1、元数据占用的数据量比较大,不利于大量数据的网络传输
2、解析不太方便
*/
getElementsByClassName() 获取元素的类名
var container = document.getElementsByClassName('container');
container[0].innerHTML='<h1>你是个好人</h1>';
console.log(container.length);
responseXML 服务端 xml格式数据类型
<?php
header('Content-Type:text/xml');
$arr = array();
$arr[0] = array('name'=>'三国演绎','author'=>'罗贯中','desc'=>'一个好汉分针的年代故事');
$arr[1] = array('name'=>'红楼梦','author'=>'曹雪芹','desc'=>'佛教的故事');
$arr[2] = array('name'=>'水浒传','author'=>'吴承恩','desc'=>'一个神奇的故事');
$arr[3] = array('name'=>'西游记','author'=>'是耐盐','desc'=>'代表广大人民形象的故事');
?>
<?xml version='1.0' encoding='utf-8'?>
<books>
<book>
<name><?php echo $arr[0]['name'] ?></name>
<name><?php echo $arr[0]['author'] ?></name>
<name><?php echo $arr[0]['desc'] ?></name>
</book>
<book>
<name><?php echo $arr[1]['name'] ?></name>
<name><?php echo $arr[1]['author'] ?></name>
<name><?php echo $arr[1]['desc'] ?></name>
</book>
<book>
<name><?php echo $arr[2]['name'] ?></name>
<name><?php echo $arr[2]['author'] ?></name>
<name><?php echo $arr[2]['desc'] ?></name>
</book>
<book>
<name><?php echo $arr[3]['name'] ?></name>
<name><?php echo $arr[3]['author'] ?></name>
<name><?php echo $arr[3]['desc'] ?></name>
</book>
</books>
?>
<!--
xml数据格式
元数据:描述数据的数据
这种数据格式的弊端:
1、元数据占用的数据量比较大,不利于大量数据的网络传输
2、解析不太方便
-->
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var uname = getElementIdForValue('username');
var pw = getElementIdForValue('password');
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft');
}
var param = 'username='+uname+'&password='+pw;
xhr.open('POST','php/06.php',true);
xhr.setRequestHeader('Copntent-Type','application/x-www-urlencode');
xhr.send(param);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseXML;
console.dir(data);
var databooks = data.getElementsByTagName('books');
var books = databooks[0].children;
var container = document.getElementsByClassName('container');
console.log(container.tagName);
let tag = '';
for(let i =0;i<books.length;i++){
var book = books[i];
var name = book.children[0].firstChild.wholeText;
var author = book.children[1].firstChild.wholeText;
var desc = book.children[2].firstChild.wholeText;
tag+='<h1>'+name+','+author+','+desc+'</h1>'
}
container[0].innerHTML=tag;
console.log(container.length);
}
}
}
}
}
function getElementIdForValue(id){
return document.getElementById(id).value;
}
</script>
json对象
/*
json数据和普通的js对象的区别:
1、json数据没有变量
2、json形式的数据结尾没有分号
3、json数据中的键必须用双引号包住
*/
对象 与 json 对比
var obj= {
name:"ZhanSan",
age:12,
lover:['football','backetball','pingbangball','rugby'],
firend:{
name:'LiWei',
height:180,
weight:'60kg'
}
};
var str = '{"name":"ZhangSan","age":12}';
var json = JSON.parse(str);
var str1 = JSON.stringify(json);
alert(str1);
php拼接数据
<?php
$uname='wangwu';
$pw = '123';
echo '{"username":"'.$uname.'","password":"'.$pw.'"}';
?>
php json_encode()
<?php
$str = json_encode($arr);
echo $str;
?>
从服务端获取json数据
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft');
}
var parm = 'username=zhangSan$password=123';
xhr.open('POST','php/07.php',true);
xhr.setRequestHeader('Content-Type','application-x-www-urlencoded');
xhr.send(parm);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.response;
var datastr = xhr.responseText;
var datatype = xhr.responseType;
console.log(data);
console.log(datastr);
console.log(datatype);
var json = JSON.parse(datastr);
console.log(json.name1);
console.log(json.name2);
console.log(json.name3);
}
}
}
}
}
</script>
默认是异步线程
<script>
window.onload=function(){
document.getElementById('btn').onclick=function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('GET','php/08.php');
xhr.send(null);
console.log(1);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
data = JSON.parse(data);
var tag = '<div><span>'+data['name']+'</span>------<span>'+data['love']+'</span></div>';
document.getElementById('info').innerHTML=tag;
console.log(2);
}
}
}
console.log(3);
}
}
</script>
<?php
$data = array("name"=>"zhansan","love"=>"footBall");
echo json_encode($data);
?>
?>
线程事件
/*
单线程+事件队列
事件队列中的任务执行的条件:
1、主线程已经空闲
2、任务满足触发条件
1、定时函数(延时时间已经达到)
2、事件函数(特定事件被触发)
3、ajax的回调函数(服务器端有数据相应)
*/
?>