ajax向后端发送数据(ajax如何往后端传数据)

Ajax前后端数据交互以及在java里面的应用

---

介绍

AJAX = Asynchronous Javascript and XML（异步的 Javascript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许Javascript在浏览器上执行。

Asynchronous Javascript + XML（异步Javascript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, Javascript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

优势

 传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用Javascript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

无需刷新页面与服务器端进行通信

允许你根据用户事件来更新部分页面的内容

缺点：

没有浏览历史

存在跨域问题（同源）

SEO【Search Engine Optimization】（搜索引擎优化）（爬虫）不友好 因为是动态从服务器拿到数据，再从浏览器渲染，原先的HTML页面中没有数据，爬虫爬不到数据（京东商城的商品数据）。

Ajax基本使用 伪造Ajax（狂神）

    
    



    

    
        
请输入要加载的地址; 
        

            
            
        
    

    
        
            加载页面的位置
        
        
    

使用JQuery提供的ajax，它的本质是XMLHttpRequest 即在浏览器networ选项中看到的xhr数据格式

Ajax的核心是XMLHttpRequest对象（XHR）, xhr相服务器发送请求和解析服务器上的请求文本，HTML，XML或者json，同时把这些外部数据直接载入网页的被选元素中。

Express的基本使用（基于node js的前端框架）【尚硅谷】

使用 npm init --yes 对目录进行初始化操作 产生一个package.json文件

安装express框架 npm i express

// 1, 引入express
const express = require('express');

// 2，创建应用对象
const app = express();

// 3, 创建路由规则
// request  是对请求报文进行封装
// response 是对响应报文进行的封装
app.get('/', (request, response)=>{
    // 设置响应
    response.send('Hello Express!');
});

// 4，创建端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中…………");
})

 node .express前端框架的基本使用.js
服务已经启动，8000端口监听中…………

浏览器中输入127.0.0.1：8000进行查看

Ajax案例 get请求

    
    
    
    


    点击发送请求
    


    

// 1, 引入express
const express = require('express');

// 2，创建应用对象
const app = express();

// 3, 创建路由规则
// request  是对请求报文进行封装
// response 是对响应报文进行的封装
app.get('/server', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    // 设置响应体
    response.send('Hello Ajax!');
});

// 4，创建端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中…………");
})

Ajax设置 get 请求参数

网址之后加?name=value&name=value？号跟参数，参数之间用&符号连接 post请求

    
    
    
    
    


    
Ajax的POST请求
    


    

// 1, 引入express
const express = require('express');

// 2，创建应用对象
const app = express();

// 3, 创建路由规则
// request  是对请求报文进行封装
// response 是对响应报文进行的封装
app.get('/server', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    // 设置响应体
    response.send('Hello Ajax!');
});

app.post('/server', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    // 设置响应体
    response.send('Hello Ajax POST!');
});

// 4，创建端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中…………");
})

Ajax设置post请求参数

post请求的参数需要在send里面设置以url的参数形式进行设置

// 3，发送
// 设置post请求的参数
// xhr.send('a=100&b=200&c=300');
// 可以设置任何格式的请求,前提是服务端可以处理相应的请求
// 实际开发中按照相应格式进行设置
xhr.send('a:100&b:200&c:300');

Ajax设置请求头信息

// 2，初始化 设置请求参数和url
xhr.open('POST', 'http://127.0.0.1:8000/server');
// 设置请求头
// Content-Type:设置请求体类型
// application/x-www-form-urlencoded
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 也可以自己设置请求头信息  要在后端进行相应的设置 可能会报错
//xhr.setRequestHeader('name', 'yuluo')

自己设置请求头信息时要在后端进行相应的设置 (后端开发负责)

// // all可以接受任意类型的请求
// app.all('/server', (request, response)=>{
//     // 设置响应头 设置允许跨域
//     response.setHeader('Access-Control-Allow-Origin', '*' )

        // 设置响应头
//        response.setHeader('Access-Control-Allow-Header')
//     // 设置响应体
//     response.send('Hello Ajax POST!');
// });

Ajax响应json数据

    
    
    
    
    


    
JSON响应
    

    

app.all('/json-server', (request, response)=>{

    response.setHeader('Access-Control-Allow-Origin', '*' )

    // 响应一个数据
    const data = {
        name: 'yuluo',
        age: '12',
        girlfriend: 'huakai'
    };

    // 对对象进行字符串转化
    let str  = JSON.stringify(data)

    // 响应体只能响应str和buffer
    // response.send('Hello Ajax JSON!');
    response.send(str);
});

nodemon自动重启工具的安装

自动帮我们重新启动服务

 npm install -g nodemon

之后开始用nodemon server.js启动服务

Ajax的IE缓存问题

    
    
    
    

    


    
    
IE缓存问题
    点击发送请求
    


    

// 针对 ie 缓存
app.get('/ie', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    // 设置响应体
    response.send('Hello ie cache -2test!');
});

解决方案就是加上时间戳，每次都是不同的请求

xhr.open('GET', 'http://127.0.0.1:8000/ie?t='+Date.now())

Ajax请求超时与网络异常处理

    
    
    
    
    



    点击发送请求
    


    

// 延时响应 
app.get('/delay', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    // 设置延时3秒响应
    setTimeout(() =>{
        response.send('延时响应');
    }, 3000)
});

Ajax取消请求

// 手动取消Ajax的请求
// 需要借助abort方法
btn[1].onclick = function() {
	x.abort()
}

Ajax重复请求问题

    
    
    
    



    发送请求

    

jQuery发送Ajax请求

前端

    
    
    
    
    
    
    


    

        
jQuery发送Ajax请求 
        GET
        POST
        通用型方法发送Ajax请求
    

    
    

后端

// 1, 引入express
const express = require('express');

// 2，创建应用对象
const app = express();

// jquery发送ajax请求
app.all('/jquery-ajax', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    let data = {name: 'yuluo'};

    // let str = JSON.stringify(data) 将json对象转换成为str send只发送send和buffer
    response.send(JSON.stringify(data));

});

// post和get以及通用方法发送ajax请求
app.all('/jquery-server', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    let data = {name: 'huakai'};

    // let str = JSON.stringify(data) 将json对象转换成为str send只发送send和buffer
    response.send(JSON.stringify(data));

});

// 延时响应 
app.all('/delay', (request, response)=>{
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*' )

    // 设置延时3秒响应
    setTimeout(() =>{
        response.send('jquery ajax');
    // }, 3000)
    }, 1000)
});

// 4，创建端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中…………");
})

Axios发送Ajax请求

    
    
    
    
    
    


    GET
    POST    
    通用方发送Ajax请求

    

fetch函数发送Ajax请求

    
    
    
    


    Ajax请求
    

跨域之Ajax同源策略

同源策略是浏览器的一种安全策略同源：协议，域名，端口号 必须完全相同违背同源策略就是跨域

a.com 向 b.com发送请求

不同端口之间发送请求 300 --> 8000

属于跨域操作

如何解决跨域问题 jsonp

jsonp （json with padding ），是一个非官方的跨域解决方案，纯粹凭借程序员的只会开发出来的，只支持get请求

在网页中一些标签天生居于跨域的能力 比如: im link iframe script

jsonp就是利用script标签的跨域能力来进行发送请求的

JSONP的使用

动态的创建一个script标签

var script = douument.createElement(“script”); 设置 script 的 src ， 设置回调函数

script.src = “http://localhost:8000/textAJAX?callback=abc”; 返回的是一个js函数的执行结果或者js代码

    
    
    
    

    
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px #90b;
        }
    



    
    

    

    
    

let data = {
    name: 'yuluo'
};

// console.log(data);

// 处理数据
// function handle(data) {
//     // 获取result元素
//     const result = document.getElementById('result');
//     result.innerHTML = data.name;
// }

handle(data);

// jsonp服务响应
app.all('/jsonp-server', (request, response) =>{
    response.send(console.log('hello jsonp-server'))
});

原生jsonp的实践

在前端输入用户名，后端进行验证，不存在返回用户名不存在并且输入框变红

    
    
    
    


    用户名: 
    
    

    

// 1, 引入express
const express = require('express');

// 2，创建应用对象
const app = express();

// 3, 创建路由规则
// request  是对请求报文进行封装
// response 是对响应报文进行的封装
app.get('/check-username', (request, response)=>{
    // 设置响应
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 返回结果
    response.end(`handle(${str})`);
});

// 4，创建端口启动服务
app.listen(8000, ()=>{
    console.log("原生jsonp的实践的服务已经启动，8000端口监听中…………");
})

CORS官方跨域请求

CORS：跨域资源共享

特点：不不要再客户端进行任何操作，完全在服务端处理 支持get和post请求

工作原理：通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对该响应放行

    
    
    
    
    


    发送请求
    


    

// 1, 引入express
const express = require('express');

// 2，创建应用对象
const app = express();

// 3, 创建路由规则
app.all('/cors-server', (request, response)=>{
    // 设置响应头
    // * 处是指定可以跨域请求的响应头 * 表示通配
    response.setHeader("Access-Control-Allow-Origin", "*")
    // 请求头
    response.setHeader("Access-Control-Allow-Headers", "*")
    // 请求方法
    response.setHeader("Access-Control-Allow-Method", "*")
    // 这样写只有5500这个端口可以发送请求
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500")

    response.send('hello CORS server');
});

// 4，创建端口启动服务
app.listen(8000, ()=>{
    console.log("原生jsonp的实践的服务已经启动，8000端口监听中…………");
})