javascript ajax基础

什么是ajax

Ajax即“Asynchronous Javascript And XML”(异步JavaScript
和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求：
1.使用JavaScript获取浏览器内置的AJAX引擎（XMLHttpRequest对象）
2.使用js确定请求路径和请求参数
3.AJAX引擎对象根据请求路径和请求参数进行发送请求
服务器接收到Ajax引擎的请求进行处理：
1.服务器获得请求参数数据
2.服务器处理请求业务（调用业务层代码）
3.服务器响应数据给Ajax引擎
Ajax引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面的具体位置：
通过设置给Ajax引擎的回调函数获取服务器响应的数据
使用JavaScript在指定的位置，显示响应的数据，从而局部修改页面的数据，达到局部刷新的目的。

与后台交互少不了ajax技术,页面动态异步刷新,用户体验更加良好
这里就要引入同步与异步的概念
同步 当给服务器发送请求之后,必须等到响应之后,在发送下一个请求,在进行下一次请求
异步 当发送请求之后,不需要等待响应,就可以立即发送下一次请求,两次互不干扰
ajax在中间充当一个中介的角色,接受请求与响应在发送给浏览器与服务器

请求报文与响应报文
请求报文主要分为请求行,请求头请求体等等,封装了请求的地址,方式,与数据格式等等
响应报文主要是响应行,响应头响应体等等 分装服务器返回来的数据
这里不做过多解释 以后有机会好好解释一下

javascript中使用ajax

1.首先需要了解最常用的请求方式 GET与POST
get方式会将请求数据写在地址后面,发送数据较少,并且不安全
而post发送数据可以较大,不会再地址栏后方显示请求数据
这个是由服务器决定的
2.其次就是发送数据的格式 json字符串与查询字符串
json字符串长这样
‘{name: ‘libai’, age: ‘20’, sex: ‘男’}’
查询字符串长这样
name=libai&age=20&sex=男
这个也是服务器决定的,要什么传什么

首先需要一个ajax对象

var xhr=new XMLHttpRequest();

设置请求行

//参数是请求方式 和请求地址 如果是get方式需要将传输数据转换为查询字符串加在地址后面
var xhr.open("GET",url+"?"+'查询字符串');
//这个是post方式
 xhr.open("POST",url);

设置请求头

//如果是json方式 这是以键值对方式传输,需要传输别的附加数据也可以以键值对的方式传输
xhr.setRequestHeader("Content-Type","application/json");

发送

//如果是post方式 就需要加参数 json字符串
xhr.send(json字符串);

监听数据

 xhr.onreadstatechange=function(){
        //xhr的状态 readstate
        if(xhr.readystate===4){
         //status 响应状态 200ok 404notfound 500 内部服务器接口问题 401未授权 403被拒绝
         if(xhr.status===200){
         //在这里面就可以接受返回来的数据,进行操作
         xhr.response//String->json  JSON.parse();
            
         }
         
        }
    }