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和XML4.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);        }    }}