1、简介 php
1.功能简介 java
ajax:全称“Asynchronous JavaScript and XML”(异步JavaScript和XML), 是一种用于建立快速动态网页的技术。经过在后台与服务器进行少许数据交换,AJAX 可使网页实现异步更新。node
主要用来作半动态项目,用来链接先后端,达到更良好的用户体验。web
2.优点ajax
传统web交互缺点:流量损耗大;缓存过多。数据库
ajax:局部刷新,在不从新加载整个网页的状况下,对网页的某部分进行更新。后端
流量损耗小;缓存小。api
2、aiax的对象缓存
XMLHttpRequest对象:是ajax的基础,用于在后台与服务器交换数据,在不从新加载页面的状况下,对网页的某部分进行更新,具备本身的api(封装接口)。服务器
XMLHttpRequest对象的方法:
abort() |
中止当前请求 |
getAllResponseHeaders() |
把HTTP请求的全部响应首部做为键/值对返回 |
getResponseHeader("header") |
返回指定首部的串值 |
open("method","URL",[asyncFlag],["userName"],["password"]) |
创建对服务器的调用。method参数能够是GET、POST或PUT。url参数能够是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码 |
send(content) |
向服务器发送请求 |
setRequestHeader("header", "value") |
把指定首部设置为所提供的值。在设置任何首部以前必须先调用open()。设置header并和请求一块儿发送 ('post'方法必定要 ) |
重要方法参数解释:
open方法
method:请求类型 | get读数据,获取 post修改数据,新建 put更新 |
url:路径 | 本地路径或远程api |
asyncFlag默认异步 | true异步 flase同步 |
username | 用户名 |
password | 用户密码 |
3、ajax使用五步法
<1>五步法
1.实例化对象
var http=new XMLHttpRequest();
2.使用open方法创建联系
http.open("method","url","asyncFlag");
3.发送请求send(content)
注:content可写可不写:写传输数据,不写请求数据
http.send();
4.获取服务器相应的数据,创建事件
http.onreadystatechange=function();{
console.log(http);
}
结果跑3次,缘由是由于有三个读取状态码:2 开始读,3 解读中,4 读结束。
http.status:网页状态码
200 | 请求成功 |
500 | 服务器报错 |
400 | 页面丢失 |
5.渲染界面
http.onreadystatechange=function(){
if(http.readystate==4){
var data=JSON.parse(http.response);
console.log(data);
}
}
<2>实例
var http=new XMLHttpRequest(); http.open("get","./list/data.txt"); http.send();/* *服务器开始响应 * */ http.onreadystatechange=function (){ /* * readyState 读物的状态码 2 3 4 * */ if(http.readyState==4) { var data=JSON.parse(http.response); console.log(data);//获取数据 /* * response 数据 * responseText 数据 * */ } }
4、封装原生ajax
API封装方法:用java asp php nodejs后端代码封装
1.传值方式
get方式传值方式:在URL路径以后以?a=1&b=2&c=3的形式传值
post:在send()上发送数据
2.封装
function method(res, url, data, callback) { var http = new XMLHttpRequest(); if (res == "get") { if (data) { url += "?"; url += data; } http.open(res, url); http.send(); } else { http.open(res, url); if (data) { http.send(data); } else { http.send(); } } http.onreadystatechange = function () { if (http.readyState == 4 && http.status == 200) { callback(JSON.parse(http.response)); } } } method("post", "./list/data.txt", null, function (data) { console.log(data); });
5、同步与异步的区别
1.
同步:等待请求完成后执行代码,
异步:代码和请求同时执行
2.实例
同步: var data=null; var http = new XMLHttpRequest(); http.open("get", "./list/data.txt",false); http.send(); http.onreadystatechange = function () { if (http.readyState == 4 && http.status == 200) { console.log(1); } } console.log(2);
注:同步会报警告,由于js是单线程,致使线程中止。
异步:
var http = new XMLHttpRequest(); http.open("get", "./list/data.txt", rue); http.send(); function showdata(callback) { http.onreadystatechange = function () { if (http.readyState == 4 && http.status == 200) { callback(http.response); } } } showdata(function (data) { console.log(data); });
注:这里利用封装方法callback拿到异步外面的数据。
6、远程地址与本地地址的区别
<1>释义
本地地址:DHCP分配或手动设定的IP地址,通常为私网地址。
本地端口号:常见的服务对应的端口:ftp:23,telnet:23,smtp:25,dns:53,http:80,https:443,还有更多的端口号对应特定的网络程序,可在其设置里查看或修改。
远程地址:公网地址,与本地地址有临时的绑定关系,正是它让咱们能够网上冲浪。
远程端口号:做用和原理与相同,数值通常也相同。
<2>如何作远程接口
1.买域名。
2.买远程服务器。
3.绑定域名与IP,装node、数据库进行项目部署。