Ajax基础--get、post理解

一、客户端和服务器端

客户端：自己的本地电脑
file://本地文件传输协议(访问本地计算机的文件)

服务器：远程的电脑
http://www.baidu.com/index.html:访问百度电脑上某一个文件
1.PHP变量
2.索引数组和关联数组
3.json_encode()将ＰＨＰ转换为JSON字符串
in_array(值，数组)判断值是否在数组中

wamp环境：
C:\wamp\www：当前localhost网站的主目录（允许用户访问的目录）
xampp环境：
c:xampp\htdocs:当前localhost网站的主目录（允许用户访问的目录）

***迫切注意：千万不要让PHP的路径中含有中文

二、两种不同请求

光明正大->访问服务器的过程:
浏览器的地址栏中输入网址，浏览器会根据地址去对应的服务器获取HTML，CSS，JS，图片和音视频等资源，将获取的内容解析并输出，就获取到我们看到的页面

偷偷摸摸->访问服务器的过程:
浏览器偷偷的去服务器获取数据，将获取的数据交给JS进行进一步加工，获取到我们想要的结果（百度搜索，判断用户名是否存在，新浪网站动态加载新闻，瀑布流）

三、AJAX理解

AJAX：偷摸访问就是AJAX的实际过程
(* )具体理解：浏览器没有被刷新，而页面的内容动态改变

优点：
1.与服务器进行异步通讯，“按需索取”，减轻服务器的压力
2.加载资源减少，用户等待时间降低，提升用户体验

缺点：
1. 没有history功能
2. 不安全，返回的数据有可能被窃取
3. 搜索引擎不友好

四、AJAX具体介绍

Async JavaScript And XML：异步JavaScript和XML

4.1 前后台交流数据：XML和JSON：用户数据传输和保存
HTML：超文本标记语言
XML：可扩展标记语言（自定义标签）只是为了存储和传输数据
<?xml version="1.0" encoding="ISO-8859-1"?>
<article>
    <title>潘金莲和西门庆的故事</title>
    <author>孙浩</author>
    <time>2016-10-13</time>
    <content>文章内容</content>
</article>
document.getElementsByTagName('username');
<person>
    <username>zhangsan</username>
    <age></age>
    <sex></sex>
</person>

JSON格式：
{
“title”:”潘金莲和西门庆的故事”,
“author”:”孙浩”,
“time”:”2016-10-13”,
“content”:”文章内容”
}

4.2 具体过程：分get请求和post请求
明着：在浏览器地址栏中输入地址，请求数据
偷偷请求：创建XMLHttpRequest请求对象，到达服务器请求数据，然后返回获取的数据

==================GET请求====================

// 1.创建XMLHttpRequest请求对象
    var xmlhttp = new XMLHttpRequest();

// 2.配置
    xmlhttp.open('GET',url,true);

// 3.发送
    xmlhttp.send();

// 4.监听是否成功
    xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log(xmlhttp.responseText);
    }
}
==================GET请求==========================

==================POST请求==========================
// 1.创建请求对象
var xml = new XMLHttpRequest();

// 2.配置
xml.open('POST', '5.php', true);

// 3.发送请求
// post发送必须设置头信息（如果post请求不设置头信息，后台接收不到发送的数据）
xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 将发送的数据放在send中
xml.send('username=songchao');

// 4.监听发送的过程
xml.onreadystatechange = function(){
    if (xml.readyState == 4 && xml.status == 200) {
        alert(xml.responseText);
    }
}

==================POST请求==========================

4.3封装AJAX的GET请求
function get(url,callback){
// 1.创建XMLHttpRequest请求对象
var xmlhttp = new XMLHttpRequest();

    // 2.配置
    xmlhttp.open('GET',url,true);

    // 3.发送
    xmlhttp.send();

    // 4.监听是否成功
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            callback(xmlhttp.responseText);
        }
    }
}

封装AJAX的POST请求
function post(url,data,callback){
// 1.创建请求对象
var xml = new XMLHttpRequest();

    // 2.配置
    xml.open('POST', url, true);

    // 3.发送请求
    // post发送必须设置头信息（如果post请求不设置头信息，后台接收不到发送的数据）
    xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // 将发送的数据放在send中
    xml.send(data);

    // 4.监听发送的过程
    xml.onreadystatechange = function(){
        if (xml.readyState == 4 && xml.status == 200) {
            callback(xml.responseText);
        }
    }
}