标签：开发 提交 获取数据 传输协议 数据显示 字符串转换 request对象 network 转换
1、Ajax(Asynchronous JavaScript And XML) 异步的JavaScript和XML
XML 可扩展标记语言
Ajax是常用的WEB开发技术，是联系前端和后端的桥梁
应用：搜索引擎（例如在百度里输入一个字符，下面就自动显示相关信息的列表
其实这些信息就是通过使用Ajax从服务器获取的）
2、HTTP原理介绍
HTTP：超文本传输协议
访问网页的原理：响应 和 请求
请求：从客户端到服务器端的请求消息
响应：服务器根据客户请求返回内容
请求方式：get 和 post
get方式请求：需要从服务器获取数据
post方式请求：把客户端的数据提交给服务器
总结：Ajax就是通过运行JavaScript程序发起HTTP请求，而不用非得把请求地址写到
浏览器地址栏，再按回车请求网页
3、Chrome浏览器开发者工具
可以通过Network选项查看发起的请求
3、搭建自己的WEB服务器
如何让自己的电脑变成服务器：安装WEB服务器程序
最常用的WEB服务器程序是Apache，但是在Windows环境下安装会比较困难，所以
可以安装一个集成环境：XAMPP(下载地址：http://www.xampps.com)
本机的IP地址：127.0.0.1 等同于域名 localhost
将网页放到XAMPP安装根目录下htdocs文件夹下
4、Ajax使用步骤
（1）创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
（2）使用onreadystatechange事件监听请求过程的变换，并设置匿名函数处理响应内容
readyState状态0-4
0：请求初始化
1：服务器建立连接
2：收到的请求
3：处理请求
4：请求完成并准备响应就绪
（3）初始化请求
xhr.open()
（4）发送请求
xhr.send()
5、XMLHttpRequest对象
属性:
onreadeystate事件
readyState XMLHttpRequest对象的状态码，从0-4变化
0：请求初始化
1：服务器建立连接
2：收到的请求
3：处理请求
4：请求完成和响应准备就绪
status HTTP状态码，例如404/200/500
responseText 返回作为一个字符串的响应数据
方法：
open(method,url,asyn)
send()
setRequestHeader()仅在post请求时使用
xhr.setRequestHeader("Content-Type","aplication/x-www-form-urlencoded");
==============以下使用表单方式和Ajax方式请求区别==============
表单方式：地址栏会跳转
Ajax方式：地址不会跳转
6、表单GET请求与POST请求的区别
GET请求会将数据拼接显示在地址栏中，不安全。且地址栏地址的长度是有限制的，超出长度，地址失效
POST请求方式不会将数据显示在地址栏，相对get方式更安全
7、Ajax发起GET请求
document.querySelector(‘#getBtn‘).onclick = function(){
var name = document.getElementById(‘name‘).value;
var message = document.getElementById(‘message‘).value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.status === 200 && xhr.readyState === 4){
alert(xhr.responseText);
}
}
xhr.open(‘GET‘,‘http://localhost/get-content.php?name=‘+ name +‘&message=‘+ message +‘‘,true);
xhr.send();
}
8、Ajax发起POST请求
document.querySelector(‘#postBtn‘).onclick = function(){
var name = document.getElementById(‘name‘).value;
var message = document.getElementById(‘message‘).value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.status === 200 && xhr.readyState === 4){
alert(xhr.responseText);
}
}
xhr.open(‘POST‘,‘http://localhost/post-content.php‘,true);
xhr.setRequestHeader(‘Content-Type‘,‘Application/x-www-form-urlencoded‘);
xhr.send(‘name=‘+ name +‘&message=‘+ message);
}
9、Ajax处理JSON数据
JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式
后端可能是php、java、.net，不管后端是什么，只要知道后端会返回一个JSON数据即可。
实际中可以根据后端提供的接口来获取JSON，再在前端进行相关操作。
JSON.parse() 可以把JSON字符串转换为JavaScript对象
10、Ajax异步和同步
同步：后面的代码必须等到Ajax请求完成后才执行
异步：后面的代码会先于Ajax请求执行
一个程序中，异步操作会等到同步操作执行完成后才执行
标签：开发 提交 获取数据 传输协议 数据显示 字符串转换 request对象 network 转换
原文地址：https://www.cnblogs.com/sherryStudy/p/ajax.html
