AJAX入门以及get和post请求

优点:

1在不刷新的情况下,与服务端进行通信; **突出优势**

2允许根据用户事件来更新部分页面

缺点:

1没有浏览历史不能回退;

2存在跨域问题(同源),即从a.com向b.com 发送请求是不可以的

3.SEO不友好 (Search Engine Optimization) 搜索引擎优化

同源: 协议,端口号,域名,必须完全相同

违背同源策略就是跨域.

跨域解决方案:

1JSONP (只支持get请求)

利用script标签来实现跨域, link img iframe 等

2.CORS(官方推出) 完全在服务端处理

请求报文和响应报文的格式: 行头空行体

Access-Control-Allow-Origin 响应头指定了该响应的资源是否被允许与给定的origin共享。

语法:

Access-Control-Allow-Origin: *  //允许所有资源都可以访问您的资源
Access-Control-Allow-Origin: <origin>

如需允许特定域名如(https://developer.mozilla.org)访问您的资源，您可以设置：

Access-Control-Allow-Origin: https://developer.mozilla.org


案例1: get()方法 

在启动前:(已经安装了node.js,它包括了npm)

需要用npm安装express,安装好后并且执行node server.js(当然还是很可能不成功,建议去看尚XX的视频,细节太多了说不完)
html:

<!DOCTYPE html> <html lang="en">
<head> <Meta charset="UTF-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> #result { width: 200px; height: 100px; border: solid 1px aqua; } </style> </head>
<body> <button>点击发送请求</button> <div id="result"></div> <script> var result = document.querySelector('#result') var btn = document.querySelector('button') btn.onclick = function () { //创建对象 const xhr = new XMLHttpRequest(); //初始化 xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300'); //发送 xhr.send(); // //readystate是 xhr对象中的属性,表示状态: // 0被初始化 1open调用完毕 2send方法调用完毕 3服务端返回的部分的结果 4服务端返回的所有结果 //change 可以触发4次 xhr.onreadystatechange = function () { //判断 (服务端返回了所有的结果) if (xhr.readyState === 4) { //判断响应状态码 200 404 401 500 302(一直没法请求,在重新读缓存) //2XX 都是成功,具体的200-300都是成功 if (xhr.status >= 200 && xhr.status < 300) { //处理结果行头空行体 //1.响应行 console.log(xhr.status); //状态码 console.log(xhr.statusText);//状态字符串 console.log(xhr.getAllResponseHeaders());//所有响应头 console.log(xhr.response); //响应体
//设置 reslut的文本 result.innerHTML = xhr.response; //点击即可出现 hello GET } else { } } } } </script> </body>
</html> server.js:(文件名最好是这个,不然要去调代码,把server换成你想的) //1.引入express
const express = require('express');
//2. 创建应用对象 const app = express();
//3.创建路由规则 app.get('/server', (request, response) => { //设置响应头为了设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体 response.send('hello GET '); }); //4.监听端口启动服务 app.listen(8000, () => { console.log('服务已经启动, 8000 端口监听中....') }) get和post请求的对比： get——从指定的资源请求数据； post——向指定的资源提交要被处理的数据。

查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.PHP?name1=value1&name2=value2

查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

POST /test/demo_form.PHP HTTP/1.1
Host: kkxx.com
name1=value1&name2=value2 get: 可以缓存，不够安全，请求有长度限制，可以前进后退，只应用于取回数据。数据类型只允许ASCII 字符。 post：不可缓存，安全，请求长度没有限制。对数据类型也没有限制

AJAX入门以及get和post请求

相关推荐