# Ajax

**Repository Path**: qiang-xiaoyue/ajax

## Basic Information

- **Project Name**: Ajax
- **Description**: 学习路上的代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-07
- **Last Updated**: 2023-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Ajax

## README

# 学习

## Ajax
根据B站up主 尚硅谷的Ajax教程学习整理 [【尚硅谷】3小时Ajax入门到精通](https://www.bilibili.com/video/BV1WC4y1b78y/?spm_id_from=333.337.search-card.all.click&vd_source=b0c96212c6cbc6032300f011d1554de7)
  [菜鸟教程](https://www.runoob.com/ajax/ajax-tutorial.html)


### node.js 和 express
1. node.js
    运行在服务端的JavaScript <br>
2. express
    基于nodeJS快速开发、极简的平台

#### node.js 和 express 搭建一个服务端
```
const express = require("express");

const app = express();
const port = 8000;

app.listen(port, () => {
  console.log("服务已启动，8000端口正在被监听...");
});

app.get("/", (request, response) => {
  //设置跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  //设置相应体
  response.send("我是首页");
});
```
### 原生Ajax
格式：
> const xhr = new XMLHttpRequest(); <br>
        xhr.open("GET/POST", "URL"); <br>
        xhr.send(); <br>
        //设置数据格式
        xhr.responseType = "json";
        xhr.onreadystatechange = function(){};
        
#### 服务端返回json格式数据
```
//数据
  const str = {
    name: "张三",
    age: "20",
  };
  //转换成JSON数据
  var data = JSON.stringify(str);
  //返回JSON数据
  response.send(data);
```

#### POST请求
> js代码：
```
<script>
    var btn_get = document.getElementById("btn_get");
    var div_1 = document.getElementById("div_1");
    btn_get.addEventListener("mouseover",  function(){
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2、初始化 设置请求方法和url,带请求参数 ？分割
        xhr.open("POST", "http://localhost:8000/one");

        //请求头
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//固定格式
        xhr.setRequestHeader("name", "123");//自定义格式

        //3、发送  POST带请求体参数
        xhr.send("a=100&b=200");

        //4、事件绑定，处理服务器返回的数据
        //readystate 是 xhr 对象中的属性，表示状态 0 1 2 3 4
        xhr.onreadystatechange = function() {
            //判断服务端返回的结果
            if(xhr.readyState == 4){
                //判断服务器状态码
                if(xhr.status >= 200 && xhr.status < 300){
                    //处理结果
                    console.log(xhr.response) //响应体
                    div_1.innerHTML = xhr.response;

                }else{

                }
            }
        };
    })
</script>
```
> 服务端代码：
```
const express = require("express");

const app = express();
const port = 8000;

app.listen(port, () => {
  console.log("服务已启动，8000端口正在被监听...");
});
app.post("/one", (request, response) => {
  //设置跨域
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.send("<i> 我是返回的东西 POST </i>");
});


```
#### GET请求 
> js代码：
``` 
<script>
    var btn_get = document.getElementById("btn_get");
    var div_1 = document.getElementById("div_1");
    btn_get.onclick = function(){
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2、初始化 设置请求方法和url,带请求参数 ？分割
        xhr.open("GET", "http://localhost:8000/one?a=100&b=200");
        //3、发送
        xhr.send();

        //4、事件绑定，处理服务器返回的数据
        //readystate 是 xhr 对象中的属性，表示状态 0 1 2 3 4
        xhr.onreadystatechange = function() {
            //判断服务端返回的结果
            if(xhr.readyState == 4){
                //判断服务器状态码
                if(xhr.status >= 200 && xhr.status < 300){
                    //处理结果
                    console.log(xhr.status); //状态码
                    console.log(xhr.statusText); //状态行
                    console.log(xhr.getAllResponseHeaders()); //所有的响应头
                    console.log(xhr.response) //响应体

                    div_1.innerHTML = xhr.response;

                }else{

                }
            }
        };
}
</script>
```
> 服务端代码：
大致同POST，app.get
### 使用JQuery 中的AJAX请求
1. 引入JQuery
2.  $.post   $.get   $.ajax 
```
<script>
    $("button").eq(0).click(()=>{
        //url,携带的数据，返回数据函数，定义返回数据类型
        $.get("http://localhost:8000/one_JSON",{a:100,b:200},(data,status,xhr)=>{
            console.log(data,xhr);
        },"json")
    })
    $("button").eq(1).click(()=>{
        $.post("http://localhost:8000/one_JSON",{a:100},(a,b,c)=>{
            console.log(a,b,c)
        })
    })
    $("button").eq(2).click(()=>{
        $.ajax({
            url: "http://localhost:8000/one_JSON",
            //请求类型
            type: "get",
            //参数
            data: {a:100},
            //响应体类型
            dataType: 'json',
            //成功回调
            success: (data,status,xhr)=>{
                console.log(data,status,xhr)
            },
            //超时时间
            timeout: 1000,
            //错误回调
            error: (error)=>{
                console.log("error:",error)
            },
            //头信息
            header: {a:100}
        })
    })
</script>
```
### 使用Axios 发送Ajax请求
1. 引入Axios [Axios文档](https://www.axios-http.cn/docs/intro)
2. axios.get().then()   axios.post().then()   axios({}).then()
```
<script>
    let btn1 = document.getElementsByTagName("button")[0];
    let btn2 = document.getElementsByTagName("button")[1];
    let btn3 = document.getElementsByTagName("button")[2];
    //定义网址
    axios.defaults.baseURL = "http://localhost:8000"
    
    //get
    $("button").eq(0).click(()=>{
        axios.get("/one_JSON",{a:100,b:200}).then(
            (data)=>{
                console.log(data)
            }
        )
    })
    //post
    btn2.onclick = function()
    {
        axios.post("/one_JSON",{a:100}).then(
            (data)=>{
                console.log(data)
            }
        )
    }
    //axios
    btn3.onclick = function()
    {
        axios({
            // `url` 是用于请求的服务器 URL
            url: "/one_JSON",
            method: "POST",
            //`params` 是与请求一起发送的 URL 参数
            params: {a:100},
            //data` 是作为请求体被发送的数据
            data: {
              b:300,
              c:100
            },
            // 自定义请求头
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            //携带数据的格式
            dataType: "json",
            // `timeout` 指定请求超时的毫秒数。'
            // `responseType` 表示浏览器将要响应的数据类型,默认json

        }).then((data)=>{
            console.log(data)
        })
    }
</script>
```
### 同源政策 跨域问题
> 同源政策：协议、主机、端口号，三者要相同
1. 后端解决跨域问题
> response.setHeader("Access-Control-Allow-Origin", "*"); //请求源 <br>
  response.setHeader("Access-Control-Allow-Methods", "*"); //请求方式 <br>
  response.setHeader("Access-Control-Allow-Headers", "*"); //请求头

```
app.all("/one_JSON", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Methods", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  //数据
  const str = {
    name: "张三",
    age: "20",
  };
  //转换成JSON数据
  var data = JSON.stringify(str);
  //返回JSON数据
  response.send(data);
});
```
2. 前端用 jsonp解决跨域问题
    *  什么是jsonp： <br>
    > 为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了
    * jsonp 和 ajax 的区别：
    > 1. ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jQuery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
    > 2. ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。
    > 3. 其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。
    > 4. jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。
    > 总而言之，jsonp不是ajax的一个特例，尽管jquery等把jsonp封装进了ajax，也不能改变这一点。
#### 代码：
> html部分：
```
<body>
    <div>
        <span>用户名：</span>
        <input type="text" placeholder="用户名">
        <p></p>
    </div>
</body>
<script>
    let input = document.getElementsByTagName("input")[0];
    let p = document.getElementsByTagName("p")[0];
    //定义一个函数，服务器返回的数据来调用
    function had(data){
        input.style.border="1px solid red";
        p.innerHTML = data.msg;
        console.log(data)
    }
    input.onblur = function () {
        //1、创建script
        const script = document.createElement("script");
        //2、设置script的src
        script.src = "http://localhost:8000/jsonp";
        //3、将script插入到文档中
        document.body.appendChild(script);
    }
</script>
```
> 服务端部分：
```
app.all("/jsonp", (request, response) => {
  //没有设置跨域，客户端用jsonp来解决，返回一个had()函数带参数。
  let data = {
    exists: 1,
    msg: "用户已存在",
  };
  let str = JSON.stringify(data);
  response.end(`had(${str})`);
});
```