Ajax和Php从入门到欲罢不能。

迈不过友情╰ 2023-02-26 03:30 29阅读 0赞

**Ajax：**  
—— 不刷新整个页面的情况下，通过url地址获取★服务器的数据★，然后进行页面的局部刷新（异步加载）

①ipconfig找局域网ip地址；`ping qq.com`找到域名对应的ip地址。  
②DNS域名解析服务器：找出ip地址和域名的映射关系。（先在本地hosts文件中查找域名对应的ip地址）

③端口：区分使用这台服务器的什么服务。  
④协议：规定两台计算机之间交换数据如何明白对方的语言。HTTP：请求头、响应头、请求体、响应体。

⑤一台服务器有多个站点服务，不同站点对应不同的域名。（配置多个站点后不能使用ip地址访问页面）  
虚拟站点配置是通过hosts文件的映射关系修改，前提更改好`http-vhosts.conf`的路径和域名。

⑥静态网站：仅仅由html页面组成，没有数据库支持，制作与维护成本大。  
动态网站：网页内容根据传入的参数动态变更的网站。

⑦ajax用于注册用户名时局部刷新显示是否已经存在，不需要整个界面的跳转。

**php基本语法：**  
①所有内容写进`<?php...?>`中。`echo`将字符串输出到浏览器中进行显示，可以解析html标签。  
②可以和html结合使用，默认文件扩展名为.php。必须在服务器上执行。  
③变量声明,使用需要使用`$`符号，无需用var或string之类，只需`$str="hello"`即可。字符串拼接使用.如：`$str3=$str1.$str2;`  
④php语法只有php模块能识别，识别之后传递给Apache然后组合给网页展示。  
⑤定义数组`$arr=array();`和js一样可以动态添加。输出数组使用`print_r($arr);`

var_dump($arr);echo json_encode($arr);

将数组arr转换为json格式的字符串。  
⑥数组下标索引自定义：

$arr=array("name1"=>"zhangsan");echo $arr["name1"];

通过下标索引访问。  
二维数组如下，缺一不可：`$arr=array();$arr["zhangsan"]=array("age"=>19,"sex"=>"male");`输出使用`var_dump($arr);以及json_ecode($arr);`json格式。  
⑦数组遍历：

$arr=array("zhangsan","lisi","wangwu");
    ⑴for($i=0;$i<count($arr);$i++){ $arr[$i];}
    ⑵foreach($arr as $key=>$value){ 
    echo $key.">>>".$value."<br>";}

常用。

**php常规知识：**  
①get请求将请求参数带在url地址栏后面，post请求加密请求。php通过form表单的action属性提交到后台进行数据处理。  
②get请求的数据在地址栏url后跟随，check.php中使用`$_GET["name"];`获取数据。  
③post请求的数据在请求体Headers，Form Data。`$_POST["name"];`  
④前端工程师要在php中写好界面动态样式，获取数据由后端工程师负责，后端工程师需要检测输入的字段是否合法。  
⑤检测合法使用两个`<?php...?>`，if右括号放在后面的`<?php...?>`中，在`<?php...?>`之间需要根据判断结果编写网页样式。

**Ajax的使用：**（JS中使用，而非php界面）  
①具体步骤：  
⑴创建XMLHttpRrquest对象：

var xhr=new XMLHttpRequest();

⑵准备发送网络请求：

xhr.open("get","checkUsername.php?username="+username,true);

第一个由php获取数据的方式决定，第二个参数中username由document获取，第三个参数true为异步，false为同步。  
⑶开始发送网络请求：

xhr.send(null);

⑷指定回调函数：

xhr.onreadystatechange=function(){ 
    var result=xhr.responseText;};

②先在html界面加上注册事件的元素，给js注册onblur等事件，获取的元素.value放入xhr中传递给php文件，最终php判断验证该数据是否有效，返回值用span.innerText=result;写入到html界面提前设置的地方。  
③创建XMLHttpRequest对象时需要做兼容处理。

if(window.XMLHttpRequest){ 
    xhr=new XMLHttpRequest();
    }else{ xhr=new ActiveXObject("Microsoft.XMLHttp");}

④如果open中第一个参数是get，则send中必须填null；第一个参数如果是post，那么第二个参数不需要加?及之后的一堆数据，要把数据放在send参数中

xhr.send("username="+username);

前一个"username"由php接收时使用的字符串决定。同时如果是post请求，必须在send之上open之下加入固定格式

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

设置请求头的信息，仅仅post请求才有。  
⑤设置回调函数时设置xhr.onreadystate

change=function(){ if(xhr.readyState==4){ 
    if(xhr.status==200){ 
    xhr.onreadystatechange=function(){ 
    var result=xhr.responseText;};     
    }}}

⑥除了xml格式都是用`responseText`，只有xml使用`responseXML`。  
⑦地址栏使用./abc表达当前目录下的abc  
⑧如果文档要求返回Json格式，则需要将responseText返回的Json字符串转换为对象，使用`res=JSON.parse(res);`转换，从而达到使用`res.status`的目的。

**同步和异步：**（详见JS基础）  
①同步是一个时间只做一件事，如果这件事没结束则一直停在卡在这件事中。  
②异步是不论这件事是否有结果，继续做接下来的事，同时进行。  
③如果open参数为false同步，则卡顿后readystate在send后就已经为4，不需要再进入回调函数onreadystatechange。  
④异步底层原理：单线程加事件队列。js的代码执行是单线程（从上往下按顺序依次执行），事件队列是一个容器，容器中存储一些回调函数，回调函数在js代码全部执行完之后才可能去调用（如注册事件、定时器、入口函数、onreadychange）  
⑤JS单线程，但其宿主游览器不是单线程。如果是异步，在xhr第三步send时会请求游览器进行网络数据的请求，然后继续执行第四步，第四步存进任务队列。如果是同步则JS自己执行第三步send。

**Ajax数据格式：**  
①将数据通过一定的规范组织起来，叫做数据格式。  
②xml数据格式：将数据以标签的方式进行组装，必须以`<?xml version="1.0" encoding="utf-8" ?>`开头，标签必须成对出现。  
缺点：体积太大，传输慢，元数据（描述数据的数据）太多，解析（通过数据得到想要的值）不便。  
③Json数据格式：类似于JS中的对象，通过key-value的形式组装。  
优点：体积小，传输快，解析方便。  
④xml数据解析：因为xml获取（responseXML）的是一个document，用`res.getElemntsTagName("booklist");`返回一个伪数组，元素的集合HTML  
Collection。\[0\]表示这个伪数组的第一项数据。

var books=result.getElementsByTag
    Name("booklist")[0].getElementsByTag
    Name("book");
    var newHtml="";    for循环books.lenght。
    var itemBook=books[i];
    var name=itemBook.getElementsByTag
    Name("name")[0].textContent;
    var tempHtml="<tr><td>"+name+"</td></tr>";        newHtml+=tempHtml;
    for循环外document.getElementById("").
    innerHtml+=newHtml;

⑤Json数据解析：Json获取的是一个类似对象的数组字符串，因此使用Json.  
parse(“res”)进行转换，res是response  
Text。`var newHtml="";`  
然后for循环，

var item=result[i];
    var name=item.name;
    var tempHtml="<tr><td>"+name+"</td></tr>"; 
    newHtml+=tempHtml;
    for循环外document.getElementById("").
    innerHtml+=newHtml;

**封装Ajax：**  
①封装步骤：首先弄清哪些东西是变的，哪些是不变的。最后明白如何将结果通知调用者，如何调用方便。  
②封装的所有参数可以放在一个对象中，为了调用方便，解决参数顺序的问题。  
③定义一个defaults对象处理参数默认值。然后使用循环，`for (var key in obj)`  
`defaults[key]=obj[key];`让传入的obj属性覆盖defaults属性。  
④Jquery中使用ajax：  
⑴`$.ajax({url:url,type:type;....});`  
⑵`$.get(url+"?"+params,fun(){....});`  
⑶`$.post(url,{...},fun(){...});`