学习Ajax获得的知识点

2016-07-17 本文已影响0人 Traxex

首先PHP页面和HTML页面可以长得一模一样，唯一的区别就是必须放在服务器的文件夹底下。

php常用语法介绍

php标签

<?php 
这个一般叫作服务器端标记
?>

正如JS需要放到script标签里面，php代码也需要放到php标记里面。这里面的内容都会被服务器解析为服务端代码。

<?php 
 echo  //这里的echo跟js中的alert有些类似,可以输出只不过alert会弹一个框出来
?>

内容输出
Php中的echo会把内容输出到html代码里面

<?php 
 echo   ‘aaa’;//就会在页面输出aaa,,并且看不到php标记。只能看到结果中的内容。
?>

echo 'string';
单引号的内容会被解析成字符串
echo "$"
双引号中如果是字符串，则与单引号没差别；
如果是变量，则会输出变量的值；
print_r():函数输出复杂数据类型,比如数组,对象
var_dump():函数输出详细信息，如对象、数组

$arr =array(1,2,'123');
echo'123';
//结果为123
print_r($arr);
//结果为Array ( [0] => 1 [1] => 2 [2] => 123 )
var_dump($arr);
/*结果为
array
0 => int 1
1 => int 2
2 => string '123'
 (length=3)

变量声明
与JavaScript不同之处在于它声明变量之前必须加$符号.
$是php中变量的标志
$符号开头，其后是变量的名称
变量名称必须以字母或下划线开头，不能以数字开头
变量名称只能包含字母数字字符和下划线（A-z、0-9 以及_）
变量名称对大小写敏感
Php中的变量不需要定义就可以直接使用

<?php 
$a= 12;
echo  $a;   //12;
?>

如果变量不带$直接echo ,会自动解析成字符串。
换句话说，php里面可以不加单引号直接加字符串。（但是不推荐这么写）

<?php 
echo abc;  //abc;
?>

字符串拼接
Php中的字符串拼接：需要用到 “.” 而JS是用 “+”
当时产生了疑问，那么JS中的 “.”php需要用什么符号？这里就需要用“->”
函数:
PHP虽然系统内建了一些函数,但是这不影响我们定义自己的函数，函数的作用就是在代码中可以重复使用的语法块页面加载的时候不会执行只有在被调用的时候才会执行
基础语法

function functionName() {
            这里写代码
}

function sayhi(){
    echo "Hello World";//无参数 无返回值的函数
}

function sayName($name){
    echo $name.'hello';//有参数 无返回值的函数
}
//调用
sayName('fox');     //foxhello

function sayFood($food='
flower'){
    echo $food;  //参数有默认值的函数
}
sayFood();         //flower
sayFood(‘water’);    //water

function sum($a,$b){
    return $a+$b; //有返回值的函数
}
sum(1,2);   // 3

定义最基础的类

class  fox{
        public $name = 'jack';
        public $age = 10;
}
$fox = new $fox;
$name = $fox->name;      //对象属性取值，并保存在$name中
$fox->name = '小狐狸';    //对象属性赋值，对象name属性赋值为‘小狐狸’

带构造函数的对象

class fox{
    //属性,外部无法访问
    var $name = 'foxes';
    public $age = 18;
    //定义方法 用来获取属性
    function Name(){
    return $this->name;
    }

构造函数可以传入参数

function fox($name){
    $this->name = $name
}
    //定义了构造函数 需要使用构造函数初始化对象
    $fox = new fox('小狐狸
');
    //调用对象方法,获取对象名
$foxName = $fox->Name();  //小狐狸

header()函数

//用来向客户端(浏览器)发送报头，如果出现中文无法显示，可以在PH代码顶部添加如下代码
header("content-type:text/html; charset=utf-8");

静态页面和动态页面

现在有些做产品的或者做设计的这些不太懂程序的人会把静态和动态页面搞混掉，有很多人认为，只要是网页会动它就是动态页面，比如一个轮播图在那边滑来滑去会动，那就是动态网页，其他那最多算一个动画效果。

静态页面
没有后台。写完HTML什么样子。用户看到就是什么样子。
动态页面:
有后台需要先经过服务器处理,然后发送给用户.

PHP表单

为了实现动态页面，我们就需要一些表单提交，从后台获得一些数据改变我们的页面。

PHP_GET 数据获取
:在PHP中,如果想要获取通过get方法提交的数据,可以通过$_GET对象来获取(但是参数在地址栏中可以查看)

//下面就是一个简单的表单代码,将数据提交到01.php,使用get的方式
<form action="01.php" method="get" >

  <label for="">姓名:

      <input type="text" name= "userName"></label>
      <br/>

  <label for="">邮箱:

      <input type="text" name= "userEmail"></label>
      <br/>

      <input type="submit" name="">
</form>

<?php 
    echo 'userName:'.$_GET['userName'];
    echo '<br/>';
    echo 'userEmail:'.$_GET['userEmail'];
    //以上代码会返回对应表单name中输入的内容
 ?>

PHP_POST数据获取
:在PHP中,如果想要获取通过post方法提交的数据,可以通过$_POST对象来获取

//下面就是一个简单的表单代码,将数据提交到02.php,使用post的方式
//(注意：代码中的method改为post)
<form action="02.php" method="post" >

  <label for="">姓名:

      <input type="text" name= "userName"></label>
      <br/>

  <label for="">邮箱:

      <input type="text" name= "userEmail"></label>
      <br/>

      <input type="submit" name=""></form>

<?php 
    echo 'userName:'.$_POST['userName']; 
    echo '<br/>';
    echo 'userEmail:'.$_POST['userEmail'];      
    //以上代码会返回对应表单name中输入的内容
 ?>

AJAX

介绍完PHP的一些内容，看起来似乎都很零散，但是结合接下来学习的Ajax就会有一个系统的认识了。

单词解释:

       Asynchronous Javascript And XML（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest

XMLHttpRequest

ajax使用的依旧是HTTP请求,那么一个完整的HTTP请求需要什么

请求的网址,方法get/post
提交请求内容数据,请求主体等
接收响应回来的内容

五步使用法
1. 建立XMLHTTPRequest对象
2. 注册回调函数
  - 当服务器回应我们了，我们想要执行什么逻辑
3. 使用open方法
  - 设置和服务器端交互的基本信息
  - 设置提交的网址，数据，post提交的一些额外内容
4. 设置发送的数据，开始和服务器端交互
  - 发送数据
5. 更新界面
  - 在注册的回调函数中,获取返回的数据,更新界面

示例代码:GET

<script type="text/javascript"> 
// 创建XMLHttpRequest 对象 
var xml = new XMLHttpRequest(); 

// 设置跟服务端交互的信息 
xml.open('get','01.ajax.php?name=fox'); //get的数据,直接在请求的url中添加即可
xml.send(null); // get请求这里写null即可 

// 接收服务器反馈 
xhr.onreadystatechange = function () {
 // 这步为判断服务器是否正确响应
 if (xhr.readyState == 4 && xhr.status == 200) {       
       alert(xml.responseText); // 打印响应内容  }
 };
</script>

示例代码:POST

<script type="text/javascript"> 
// 异步对象 
var xhr = new XMLHttpRequest(); 
// 设置属性 
xhr.open('post', '02.post.php' ); 
// 如果想要使用post提交数据,必须添加 

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
// 将数据通过send方法传递 

xhr.send('name=fox&age=18'); 
// 发送并接受返回值 

xhr.onreadystatechange = function () { 
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) { 
alert(xhr.responseText); }
 };
</script>

考虑兼容性创建Ajax对象

var request ; 
if(XMLHttpRequest){ 
// 新式浏览器写法 
request = new XMLHttpRequest(); 
}else{ 
//IE5,IE6写法 
new ActiveXObject("Microsoft.XMLHTTP");
}

Ajax注意事项

POST请求注意点
如果想要像form表单提交数据那样使用POST请求,需要使用XMLHttpRequest对象的setRequestHeader()方法来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：

xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

onreadystatechange

每当readyState改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态
从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200: "OK"
404: 未找到页面
所以得当ready为4，status=200时，才表示找到页面，并且已经读取完毕时，调用onreadystatechange函数来执行我们想要的逻辑。
服务器响应内容
- 如果响应的是普通字符串,使用responseText
- 如果响应的是XML,使用responseXML