首先说一下js是单线程执行，但是存在异步执行机制（定时器和事件）
(一)什么是ajax:
ajax(ajax = 异步JavaScript和XML)是利用一系列的交互式网页应用相关的技术所形成，是一串技术的结合体，ajax内置进了浏览器（实际上是浏览器内建了XMLHttpRequest对象），所以不需要安装插件,只需要用户允许 JavaScript在浏览器上执行
（二）ajax概述：
1.ajax是JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：
①javascript : 通过用户或其他浏览器相关事件捕获交互行为。
②XMLHttpRequest对象:ajax对象的生产者，可以在不中断其他浏览器任务的情况下向服务器发送请求。
③服务器上的文件以XML，HTML或JSON格式保存文本数据
④其他JavaScript来处理从服务器请求来的数据
2.优点：
①不需要插件
②不需要刷新整个页面，就可以对网页的部分数据进行更新
③将服务器的操作转移到客户端，请求的少加载的快，减轻了宽带的压力
3.缺点：
④IE5之前的对ajax的不支持
⑤ajax加载总在当前页面，不会回退到之前页面
⑥搜索引擎支持度不够，因为搜索引擎的爬虫还不能理解JS引起变化数据的内容
⑦开发调试工具少，相对其他语言的工具集来说，JS或Ajax调试开发少的可怜
4.①var ajax = new XMLHttpRequest()//创建一个XMLHttpRequest对象,用于与后台交换数据，不需要重新加载整个网页就能对网页的某一部分进行更新
②ajax.open(“GET”,“http://..？”+new Date().getTime())//设置请求参数,加上去时间戳每次请求都会更新
③ajax.send(null) //已经被很多浏览器当成必选参数了
④ajax.onreadystatechange = function(){
//readystate改变时会触发该函数
//时间的触发和请求状态有关
//和网速有关
//不确定多久会执行
//异步
Console.log(ajax.readyState) //ajax对象的状态，状态码有0,1,2,3,4
0:(未初始化)还没有调用send()方法
1:(载入)已调用send()方法，正在发送请求
2：（载入完成）send()方法执行完成，已经接收到全部响应内容
3:(交互)正在解析响应内容
4:(完成)响应内容解析完成(XMLHttpRequest已成功接收到数据)可以在客户端调用了
⑤if(ajax.readyState == 4 && ajax.status == 200){
Console.log(“可以得到结果“)
Console.log（ajax.responseText）//后台请求的结果
}
}
http状态码： 1系列(浏览器问题)
2系列（成功）
3系列（js逻辑，代码问题）
4系列(路径问题)
5系列（服务器的问题，找后台解决）
5.封装GET获取数据：
function ajaxGet(url,callback,data){
if(arguments.length == 3){ //若为3则是发送数据，以此判断发送和接收
url += “?” + data //data为参数即字段名=字段值
}
var ajax = new XMLHttpRequest();
ajax.open(“GET”,url);
ajax.send(null);
ajax.onreadystatechange == function(){
if(ajax.readyState == 4 && ajax.status == 200){
var json = JSON.parse(ajax.responseText);
callback(json)
}
}
}
6.post接收数据和get没有差别，发送数据有差别。Post发送数据封装
function ajaxPost(url,callback,data){
If(arguments.length == 2){
Data = null ; //此时不发送数据
}
var ajax = new XMLHttpRequest() ;
ajax.open("POST","url") ;
ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”) //请求头
ajax.send(data) ;
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
callback(ajax.responseText) ;//获得字符串形式的响应数据}
}
}
ajaxPost(“http://...”,function(res){
alert(res)
},”kouling=zmkm”)
7.ajax跨域
（jsonp的应用场景）; 发生跨域问题ajax不能接受或者发送数据的时候;
(jsonp前端应该做什么); 得到一个 接口 ; 动态拼接一个script ; 写一个回调函数;
（后台如何帮你完成jsonp跨域）; (允许访问! => header) 调用你的函数！;
<script type="text/javascript">
function jsonpCallback(result) {
//alert(result);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>
或者：
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>
jquery中实现：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.getJSON("http://crossdomain.com/services.php?callback=?",
function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
});
</script>
或者：
<script type="text/javascript">
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
},
timeout:3000
});
</script>
或者：
<script type="text/javascript">
$.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');
</script>
8.两种常用的数据交互的方式：GET，POST
GET :最简单，轻便，快捷的数据交互方式，数据量限制在2-100k之间，安全性地，通常接收数据
POST:最复杂，发送数据量比较大，1G以内，安全性高，主要用于发送数据
9.eval( )方法：将字符串转换成JavaScript可以认识的编码；
转载请注明原文地址: https://www.6miu.com/read-58579.html
