javascript第十五天ajax

Ajax

1. ajax初识

(1)     Async JavaScript and XML    异步的 js 和 XML

(2)     主要的作用：创建交互式网页应用

(3)     优势：ajax创建的交互式网页应用 相比传统的网页 可以实现 异步更新页面的效果，不用重载整个页面

1. 简单的ajax交互步骤

(1)     创建ajax对象

①    Var xhr = new XMLHttpRequest()

(2)     建立前端页面后后台数据库的连接

①    Xhr.open(“请求方式”,url地址,是否异步)

②    请求方式有八种，常用的有两种 get/post

③    Url地址 就是我们要请求数据的地址

④    是否异步：是一个布尔值（true/false）  可以不传 默认值为true

(3)     发送请求 

①    Xhr.send()

(4)     Xhr.onreadystatechange = function(){}

①    监听当前通信状态码（readyState）到底是几

②    通信状态码

1)       0：ajax对象尚未初始化完成

2)       1：ajax对象已经初始化 并建立了和后台的连接

3)       2：ajax对象已经将请求发送了出去

4)       3：后台接收到请求 并正在处理中

5)       4；后台处理请求完毕 并将数据响应给前端

③    当通信状态码为4的时候 就可以 得到响应数据了

(5)     请求状态码

①    常用请求状态码

1)       200：请求成功 数据来源于后台服务器

2)       304：请求成功 数据来源于本第缓存

3)       403：请求失败 没有权限访问

4)       404：请求失败 找不到地址（请求超时）

5)       500及以上：请求失败，后台逻辑问题

1. 安装wamp环境

(1)     liveServer不支持post请求方式

(2)     我们如果真的想开发ajax交互式代码 还需要使用服务器环境

(3)     Wamp集成服务器软件

①    Wamp----> windows Apache MySQL php

②   

1)       选择路径 需要选择一个纯英文的路径

③   

1)       点击install 按钮 就可以无脑安装

(4)     我们打开127.0.0.1这个ip地址 就可以访问本地服务器，我们可以向服务器中存入文件，这样就可以在本地服务器中打开这些文件

(5)     将文件存入服务器中：

①    打开wamp的安装目录 安装目录中 有一个 www 的文件夹

②    打开www文件夹

③    在www文件夹中有一个 index.php 文件

1)       注意：在wamp中 任何命名为index的文件 都会被默认打开

④    我们只需要将 需要服务器环境的文件 存入 www文件夹中 即可

1. Post请求 和 get请求的区别

(1)     Get

①    写法：

 //1.创建ajax对象

        var xhr = new XMLHttpRequest();

        //2.建立前端页面 和 后台服务器的连接

        //get请求提交数据  就是将数据写在url地址的后面  url?键名=键值&键名=键值。。。。

        xhr.open("get","./data.txt?name=allen&age=18&gender=god");

        //3.发送请求

        xhr.send(null);

        //4.接受响应数据

        xhr.onreadystatechange = function(){

            if(xhr.readyState===4&&(xhr.status==200||xhr.status==304)){

                //5.获取数据

                console.log(xhr.responseText);

            }

        }

②    Get请求提交的数据 直接写在地址栏后面

1)       Url地址?键名=键值&键名=键值.....

③    缺点：提交数据 直接写在地址栏后面 会导致用户信息完全被泄露，安全性极低，get请求提交的数据量比较小 大概只有4k左右

④    优点：请求和响应速度快

(2)     Post

①    写法：

var xhr = new XMLHttpRequest();

        xhr.open('post',"./data.txt");

        //设置请求头 xhr.setRequestHeader(Content-type","application/x-www-form-urlencoded)

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

 

        xhr.send(‘name=allen&age=18&gender=god’);

        xhr.onreadystatechange = function(){

            if(xhr.readyState===4&&(xhr.status==200||xhr.status==304)){

                console.log(xhr.responseText);

            }

        }

        //请求报文    响应报文

        //请求命令行    请求头    请求主体

②    Post请求需要设置请求头

③    Post提交数据

1)       提交在send中

2)       写法：键名=键值&键名=键值........

④    优势：请求提交的数据 不会直接显示在地址栏中 从而提高了安全性， 可提交的数据量较大，大约20M左右。

⑤    缺点：请求响应的速率稍慢

1. 封装ajax函数
2. Ajax操作数组

(1)     如果我们直接获取数据 得到的结果是一个字符串， 即便是数组或对象 得到的也是数组或对象样式的字符串，我们无法直接操作

(2)     我们需要将字符串转换为真正的数组或对象来进行操作

①    方法：eval(字符串)

②    作用：eval中的字符串 如果内容有js代码 就会直接执行

③    例如：eval(“[1,2,3,4]”)  ---->  [1,2,3,4]

④    Eval弊端：无法处理冒号 因此不能转换对象

1. Ajax操作json对象

(1)     Json的特点：json是一种数据格式，不属于任何一种语言，因此没有语法结构，可以在最大限度上节省网络资源， 由于json不属于任何一种语言，因此没有语法，这导致json可以兼容绝大多数语言

(2)     编写json数据

①    Xxxx.json json数据

②    一个json文件中只能写一个数据（json文件中一般只写数组和对象）

③    Json中如果写引号 必须写双引号。

④    Json数组的写法

1)       json数组 和 js数组 写法基本一致

2)       最后一个数组项后面 不能写逗号

⑤    Json对象的写法

1)       和js对象的写法基本一致

2)       属性名必须加引号

3)       最后一个属性后面不能加逗号

(3)     json数据 直接获取到 是一个字符串 不能直接操作，需要转换为js的数据

①    方法：JSON.parse(要转换的json数据)

(4)     Js数据 转 json数据

①    方法：JSON.stringify(要转换的js数据)

1. 注意：在编写ajax代码的时候 应该将ajax代码 写在整段代码的最前面， 目的是为了最大限度提升项目性能