-
Ajax简单的来说，就是一个异步的javascript请求，用来获取后台服务端的数据，而并不是整个界面进行跳转。
-
Ajax的作用：获取服务器的数据。
-
Ajax的效果：在不刷新整个页面的情况下，通过一个url地址获取服务器的数据，然后进行页面的局部刷新。
-
了解DNS域名服务器：提供域名与ip地址的映射关系。
-
访问服务器的流程：输入网址——> hosts（C:\Windows\System32\drivers\etc\HOTS）——>DNS服务器——>服务器
-
Ajax的使用有四个步骤：
（1）创建XMLHttpRequest对象
（2）准备发送网络请求
（3）开始发送网络请求
（4）指定回调函数
//1、创建XMLHttpRequest这个对象 需要注意兼容处理
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
//IE6浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、准备发生 true 异步； false 同步
// xhr.open("get", "checkUsername.php?username=" + username, true);
xhr.open("post", "checkUsername.php", true);
//3、get请求，执行发送
// xhr.send(null);
//3、post请求，我们的参数体应该放到请求体中
var param = "username=" + username;
//设置xhr的请求头信息，这个步骤仅仅是针对于post请求才有的
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(param);
//4、设置回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var result = xhr.responseText;
console.log(result);
document.getElementById("result").innerText = result;
}
}
}
-
Ajax是异步请求（同时进行，比如网上购物，你在等快递来的时候，你可以做其他的事情），当然也可以同步请求（同一时间只能做同一件事情，比如网上购物，你只能等快递来了之后才能做其他事情)。如果Ajax改为同步请求，会出现的两个问题：
（1）界面会卡顿，卡顿多长时间，取决于网络速度。
（2）xhr.onreadystatechange的回调将不会被执行，需要修改代码后才能获取到数据将回调去除即可。 -
异步的底层原理：js中的异步的实现的原理是单线程加事件队列，js的代码执行是单线程的，所谓的单线程的含义是js的代码是从上往下按顺序依次执行的，一定是上一行代码执行完再执行下一行代码。事件队列可以认为是一个容器，这个容器中存储一些回调函数。这些回调函数只有在js代码全部指向完成之后，才有可能会去调用，因为js是单线程的，一次只能做一件事情。
-
两种数据格式的优缺点：
（1）Xml数据格式：将数据以标签的方式进行组装，必须以<?xml version=“1.0” encoding="utf-8" ?>开头，标签必须成对出现，也就是有开始标签就一定要有结束标签。
缺点：体积太大，传输慢，元数据太多，解析不方便，目前使用的很少。（2）Json数据格式：类似于js中的对象方法，通过key-value的形式组装，是一个通用的标准，任何人都知道如何解析它。
优点：体积小，传输快。 -
使用Ajax是为了访问自己服务器的数据，使用的是同源访问（在同一个服务器，协议，域名，端口三者条件完全相同），如果需要访问别人服务器的数据就要跨域。跨域的步骤如下：
A、访问外部js文件
B、访问外部php文件
C、动态创建script标签传入动态参数
D、前端界面决定方法名称
E、给window增加属性进行方法定义
<script type="text/javascript">
window.onload = function() {
var btn = document.querySelector("#btn");
btn.onclick = function() {
var cityName = document.querySelector("#city").value;
//动态创建scriptiaoq，动态定制src属性的值
var script = document.createElement("script");
script.src = "http://www.lisi.com/data.php?city=" + cityName + "&callback=foo2";
//给window添加一个方法，这样就全在一起，不需要在外面重新定义一个方法
window["foo2"] = function(data) {
console.log(data);
}
var head = document.querySelector("head");
head.appendChild(script); //把创建好的script放入head中
};
};
</script>
-
模板引擎：无论是Ajax还是跨域，目的都是为了获取服务器的数据，获取数据之后将前端界面进行渲染。怎么渲染前端界面呢？前端界面都是由标签构成的，所以前端界面的渲染主要做的就是生成html标签。
模板引擎的本质：将数据和模板结合起来生成html片段。所以模板引擎需要两个组成部分：模板和数据，通过数据，将模板指定的标签动态生成，方便维护。
<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>Document</title>
<!-- 导入js文件 -->
<script type="text/javascript" src="template.js"></script>
<!-- 模板引擎 -->
<script type="text/html" id="resultTemplate">
<h1>{{title}}</h1>
{{each books as value i}}
<div>{{value}}</div>
{{/each}}
</script>
<script type="text/javascript">
//这是模拟的数据，后台数据需要渲染到前端界面
window.onload = function() {
var data = {
title: '四大名著图书信息',
books: ['三国演义', '水浒传', '西游记', '红楼梦']
};
//方法参数传进去
var html = template("resultTemplate", data);
//获取元素，内容替换
var container = document.querySelector("#container");
container.innerHTML = html;
}
</script>
</head>
<body>
<div id="container">
<h1>标题</h1>
<div>书名1</div>
<div>书名2</div>
<div>书名3</div>
</div>
</body>
【含有条件判断的模板索引】
【当数据就只是数组时，模板引擎需要变通一下】
【模板引擎的字符转义】
总结：
1、前端界面需要访问自己服务器数据，采用ajax 1234四个步骤
2、前端界面访问第三方接口，并且是jsnop格式，采用跨域，动态创建scrip标签。
3、前端界面访问第三方接口，并且是json格式的字符串，先采用ajax的四个步骤，访问自己的服务器php，jsp，再用自己的服务器访问第三方接口。
4、使用模板引擎，格式要正确，双标签
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
