ajax

用户7428254102502
105 阅读3分钟

概念理解

前端：客户端，面对用户的程序，比如说，平常做的网站，给用户的展示的网站-前台

后台：服务器端做的程序，不面对用户的，面对的是公司管理员-后台

存储数据的地方，数据库-独立于系统之外的一个软件，其中可以永久的存储数据，有独立的操作语言，可以对数据做添加，修改，查询的功能。

前端所使用的语言只有js，js不能操作数据库，只有服务器端语言才行，例如：java，python，php，nodejs。。。。

前端使用数据，必须是通过后端来操作数据的，将数据给前端，利用ajax

后端写一套程序-接口，前端可以利用ajax访问到接口中的数据，当接口程序启动起来以后，就可以通过ajax访问接口获取到数据，对数据做操作。

前端攻城狮、前端的工作：做展示页面的攻城狮，根据数据渲染页面

后端攻城狮、后端的工作：做对数据的操作，连接数据库，根据特定语言对数据进行增删改查

服务器：

当输入网址敲回车的时候，发生了什么？

输入域名 - 需要解析成ip地址，找电信，电信没有页面，电信帮我们去找这个页面，他连接的网络更多，根据ip地址找，就会找到百度页面所在那台电脑，根据百度电脑设置的规则获取到这个页面。

远程服务器：很远的一台电脑

那台电脑需要开启服务，允许别人通过ip地址访问页面的服务 - web服务

创建web服务器且打开这个服务器，然后别人才能通过ip地址访问到你的电脑中指定的某些文件。

ajax语法

步骤：

1，创建ajax对象

var xhr = new XMLHttpRequest()

2,设置请求信息

xhr.open(请求方式，请求地址，是否异步的布尔值）

3，发送请求

xhr.send()

4，监听请求状态

xhr.onreadystatechange = function(){
       //判断是否请求结果
       if(xhr.readuState ===4){
            //判断是否请求成功
            if(xhr.status>=200 && xhr.status < 300){
                   //接收响应的数据
                    var res = xhr.responseText
                        //输出数据
                         console.log(res)
              }
        }
  }

json数据

数组和对象被称为json对象，长的像数组或对象的字符串，叫做json字符串。

json对象转json字符串

JSON。stringify(json对象)

json字符串转json对象

JSON.parse(json字符串)

这个方法只能转换json字符串或数字类字符串或布尔值或null，其他字符串会报错。

json文件

有一种文件专门用于存储数据和传输数据使用，文件后缀叫json。

json文件格式要求：

1，在文件中只能有一个数组或对象

2，对象的键必须加双引号

3，如果对象的值是字符串，也必须加双引号

4，对象或数组的最后一项后面必须不能加逗号

5，文件中没有注释

例：

{
    "people": {
        "name": "张三",
        "age": 12,
        "children": []
    },
    "dog": "小狗"
}

携带数据

get请求带参数

get请求是哪种请求？

1，直接在地址栏输入地址敲回车

2，点击a标签跳转到另一个页面

3，引入文件的请求，link引入css，script引入js，img引入图片，iframe引入html页面。

4，form的get提交或默认提交

5，ajax发送的get请求

get请求的参数，是直接放在地址栏中的，以键值对形式表现，键值对之间用 & 隔开，键和值之间使用 = 隔开，所有数据在地址栏的 ？ 后面。

var xhr = new XMLHttpRequest;
xhr.open('get','http://localhost:8888/test/third?name=李四&age=888');
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status<300){
            var res = xhr.responseText;
            // 将json字符串转成json对象
            res = JSON.parse(res)
            console.log(res);
        }
    }
}

post请求带参数

要求：

  1. 必须在send方法之前open方法之后添加头信息

    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

    表示数据在传送之前要进行编码处理。

  2. 将数据以字符串形式放在send方法中，跟地址栏中的数据格式一样

    xhr.send('name=王五&age=666')

ajax请求文件

ajax如果要请求文件：被请求的文件必须要在web服务器中

web服务器的搭建，利用vscode插件：

  1. live server插件
  2. preview on web server插件

请求的文件地址，就以当前文件的相对路径去请求即可。

ajax请求xml

.xml全称：extension markup language - 可扩展标记语言。用来存储和传输数据。

xml文件要求：

  1. 必须要有一个文档声明
  2. 必须要有一个非xml的根标签

ajax接收xml文件数据：

xhr.responseXML

接收到的是一个dom对象，可以通过dom节点操作来完成操作。注意没有innerText，只有innerHTML

avatar
文章
阅读
粉丝