[AJAX]AJAX的入门学习

AJAX入门

听了方老师的课程,配上了阮一峰阮老师的教程食用,整理记录一些使用AJAX所需的知识点。


什么是AJAX

Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。


为什么使用AJAX

首先整理总结一下主要发送HTTP请求的方式及其优缺点

  • form 可以发请求,但是会刷新页面或新开页面
  • a可以发 get 请求,但是也会刷新页面或新开页面
  • img 可以发 get 请求,但是只能以图片的形式展示
  • link 可以发 get 请求,但是只能以 CSS、favicon 的形式展示
  • script(JSONP) 可以发 get 请求,但是只能以脚本的形式运行
  • AJAX 不仅仅可以发送get请求,还可以发送post/put/delete请求;而且可以只刷新局部,不会刷新页面。利用CORS还可以规避同源策略,实现跨源访问。

使用方式

一个完整的使用AJAX完成HTTP请求的流程步骤为:

1.创建 XMLHttpRequest 实例

2.发出 HTTP 请求

3.接收服务器传回的数据

4.更新网页数据

下面就是一个AJAX例子:

前端:


// 创建一个XMLHTTPRequest实例对象
let request = new XMLHttpRequest()

// 监听请求状态
request.onreadystatechange = function(){

    // 通信成功时,状态值为4
    if (request.readyState === 4){
        if (request.status === 200){
            console.log(request.responseText);
            let string = request.responseText

            //把符合JSON语法的字符串转换成JS对应的值
            let obj = window.JSON.parse(string)
            console.log(obj)
        } else {
        console.error(request.statusText);
        }
    }
};

// open()方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象
request.open(‘GET‘,‘/xx‘)

// send()方法用于实际发出 HTTP 请求。
request.send()

服务器:

...
if(path === ‘/xxx‘){
    response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
    response.statusCode = 200
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}

更多参数可以参考阮一峰老师的博客


使用JSON

关于JSON的学习可以看官方文档

JAX 通过原生的XMLHttpRequest对象发出 HTTP 请求,得到服务器返回的数据后,再进行处理。现在,服务器返回的都是 JSON 格式的数据,XML 格式已经过时了

注意

服务器返回的并不是JSON对象!

服务器响应的是字符串,如上面的例子中:

...
response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
...

他只是符合JSON对象语法标准的字符串,不是对象。

如果要让他变成我们需要的值,则需要:

let string = request.responseText

//把符合JSON语法的字符串转换成JS对应的值
// 这里就把字符串转化成了一个JS对象
let obj = window.JSON.parse(string)

同源/跨源

同源政策规定,AJAX请求只能发给同源的网址,否则就报错。

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing),可以使用CORS规避同源限制。

关于如何跨源以及更详细的参数可以参考阮老师的另一篇博客

下面这个例子使用了最简便的方法:给服务器端response的header设置Access-Control-Allow-Origin:

...
if(path === ‘/xxx‘){
    response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
    response.statusCode = 200

    // here
    response.setHeader(‘Access-Control-Allow-Origin‘:‘http://frank.com:8081‘)
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}


下面分别是AJAX的同源、跨源的demo:

同源

请求方:http://frank.com:8081

响应方:http://frank.com/xx:8081

前端代码:

let request = new XMLHttpRequest()
request.onreadystatechange = function(){
    // 通信成功时,状态值为4
    if (request.readyState === 4){
        if (request.status === 200){
            console.log(request.responseText);
            let string = request.responseText
            //把符合JSON语法的字符串转换成JS对应的值
            let obj = window.JSON.parse(string)
            console.log(obj)
        } else {
        console.error(request.statusText);
        }
    }
};
request.open(‘GET‘,‘/xx‘)
request.send()

后台:

...
if(path === ‘/xxx‘){
    response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
    response.statusCode = 200
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}

跨源(CORS):

请求方:http://frank.com:8081

响应方:http://www.baidu.com:8081

前端代码:

let request = new XMLHttpRequest()
request.onreadystatechange = function(){
    // 通信成功时,状态值为4
    if (request.readyState === 4){
        if (request.status === 200){
            console.log(request.responseText);
            let string = request.responseText
            //把符合JSON语法的字符串转换成JS对应的值
            let obj = window.JSON.parse(string)
            console.log(obj)
        } else {
        console.error(request.statusText);
        }
    }
};
request.open(‘GET‘,‘http://www.baidu.com:8081‘)
request.send()

后台:

...
if(path === ‘/xxx‘){
    response.setHeader(‘Content-type‘,‘text/html;charset=utf-8‘)
    response.statusCode = 200
    response.setHeader(‘Access-Control-Allow-Origin‘:‘http://frank.com:8081‘)
    response.write(`
        {
            "people":{
                "name":"ajax"
            }
        }
    `)
    response.end()
}

本篇入门学习AJAX的文章就到此结束啦~。

原文地址:https://www.cnblogs.com/No-harm/p/9630718.html

时间: 2024-10-08 12:41:15

[AJAX]AJAX的入门学习的相关文章

Ajax入门学习原始代码

<script type="text/javascript">        window.onload = function () {            //1.创建xmlhttprequest对象            var xhr = createXHR();            function createXHR() {//为了兼容新老IE的版本                var request;                if (typeof(X

AJAX入门学习-1:理解ajax

小生博客:http://xsboke.blog.51cto.com 如果有疑问,请点击此处,然后发表评论交流,作者会及时回复. -------谢谢您的参考,如有疑问,欢迎交流 一. 什么是ajax ajax:asynchronous javascript and xml,异步javascript和xml,即使用javascript语言与服务器进行异步交互,传输的数据库为 xml(当然,传输数据的不只是xml) ajax还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷

Ajax的快速入门

1.什么是ajax ajax是技术名词的缩写: Asynchronous:异步: JavaScript:JavaScript语言: And:和.与: XML:数据传输格式 ajax是客户端通过HTTP向服务器发送请求 2.ajax对象的属性.方法    属性 readyState:  Ajax状态码 3.xhr.getAllResponseHeaders() 获取全部响应头信息 4.xhr.getResponseHeader('key') 获取指定头信息          5.send([con

JavaScript入门学习书籍的阶段选择

对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什么专家,也不是什么高手,但自己一路走来,JavaScript 从迷茫到认识,对于JavaScript 书籍的认识或许还有些借鉴价值.入门推荐首选书籍:<JavaScript DOM 编程艺术>当初读了不下 4 遍,书内容简单,易学,上手快,编程思想严谨.好的入门书,对你未来的编程都会有着深远的影响

ReactJS入门学习一

阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么? React仅仅是VIEW层,而我们经常看到Angular是一个完整的框架,而React不是,因此我们看到他们两个的侧重点不一样,所以也不能比较的,React提供了模板语法及一些函数钩子用于HTML的渲染,只用于View层. React的优点?       1. 虚拟DOM 在DOM树的状态发生改变时,虚拟DOM机制会将前

jqMobi(App Framework)入门学习(一)

jqMobi(App Framework)入门学习(一) 1. 什么是jqMobi? jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极其快速的查询选择库,支持W3C查询. jqMobi源码是基于jQuery源码重写的,但是两者又属于不同的产品,jqMobi体积更小,速度更快,兼容性也有所不同. 上面这段话来自百度百科,但是目前由于jqmobi已被收购并不断发展,而且jqmobi并不仅仅局限于查询选择库,所以上面的解释并不是很全面. 2. jqMo

jquery 快速入门学习总结

jquery 快速入门学习总结 jquery简介 jquery 是一个免费,开源的javascript 库. jquery作用 方便完成web前端的工作,例如节点操作,元素操作,事件绑定,ajax操作,并且解决了大部分的兼容问题 jquery使用配置 1.本地配置 1.1 下载jquery文件,  www.jquery.com 1.2 引入,放在文件同目录       <script type="text/javascript" src="jquery.1.8.3.mi

PHP 入门学习教程及进阶(源于知乎网友的智慧)

思过崖历程: 自学的动机.自学的技巧.自学的目标三个方面描述学习PHP的经历 一.自学的动机: 一定要有浓厚的兴趣,兴趣是最后的老师,可以在你迷茫的时候不断地支撑着你走下去. 自学不是为了工作,不是为了梦想,仅仅是随便玩玩而已,大可不必各种纠结,互联网很发达,教程随便一搜就一大堆,学个一知半解装装B还是很轻松的,特别是慕课网上的各种眼花缭乱的视频教程,绝B会让你恨时间如流水,何其宝贵--然而这并没有什么卵用,在大部分的情况下,它仅仅适合学习某一门语言的一个专题,并没有针对某一门语言提供由浅入深,

android JNI入门-学习笔记

JNI入门-学习笔记 可执行文件 Windows - *.exe | linux - *.elf c函数库文件 Windows - *.dll | linux - *.so 批处理文件 Windows - *.bat | linux - *.sh 工具 NDK -- native developer kits Cygwin -- Linux系统模拟器 安装过程要点: --安装时可以联网安装也可以通过本地文件安装(如果有本地文件) --Select Packages:没必要全部安装,安装Devel