Js_Ajax

最新推荐文章于 2024-04-28 04:00:44 发布

Iconoclast_wu

最新推荐文章于 2024-04-28 04:00:44 发布

阅读量445

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u012807459/article/details/38623623

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax 其实理解为异步的请求模型就好也就是说再不刷新页面的情况下与服务器进行交互

先使用一下Ajax体验一下

目录结构如下

mu'lu'jie'gou

ajax.js文件

//onreadystatechange事件
//readyState属性：请求状态
//0	（未初始化）还没有调用open()方法
//1	（载入）已调用send()方法，正在发送请求
//2	（载入完成）send()方法完成，已收到全部响应内容
//3	（解析）正在解析响应内容
//4	（完成）响应内容解析完成，可以在客户端调用了
//status属性：请求结果
//responseText
function ajax(url, fnSucc, fnFaild)
{
	//1.创建Ajax对象
	var oAjax=null;

    //Js如果访问一个不存在的元素会出错
    //Js如果访问一个不存在的属性只会undefined
    //IE6不兼容XMLHttpRequest所以要先判断如果是IE6则使用ActiveXObject
	if(window.XMLHttpRequest)
	{

		oAjax=new XMLHttpRequest();
	}
	else
	{
		oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	//2.连接服务器
	oAjax.open('GET', url, true);
	
	//3.发送请求
	oAjax.send();
	
	//4.接收服务器的返回
	oAjax.onreadystatechange=function ()
	{
		if(oAjax.readyState==4)	//完成
		{
			if(oAjax.status==200)	//成功
			{
				fnSucc(oAjax.responseText);
			}
			else
			{
				if(fnFaild)
					fnFaild(oAjax.status);
			}
		}
	};
}

index.html 注意这里不能本地直接打开比如通过启动的webserve去访问，否则因为ajax跨域的问题会导致ajax无法获取数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>brainwu</title>
    <script src="/views/js/ajax.js"></script>
    <script>
        window.οnlοad=function() {
            var oBtn1 = document.getElementById('btn1');
            oBtn1.onclick = function() {
                //str为服务器返回的数据
                ajax("http://localhost:8080/v1", function(str) {
                    //eval 可以将字符串[1, 2, 3, 4, 5]转换为数组
                    //alert(typeof eval(str)[0]);
                    //eval 可以将字符串[{a:21,b:100}, {a:31,b:200}]转换为存储json的数组
                    //alert(eval(str)[0].a);
                    //str为function show(){alert('brainwu')} 可以将str通过eval转换为函数然后调用
                    //不通过eval转换是无法调用的
                    eval(str);
                    show();
                } );
            };
        }
    </script>
</head>
<body>
    <input type="button" value="ajax" id="btn1"/>
</body>
</html>

main.go

package main

import (
	"net/http"
	"log"
	"fmt"
)

func main() {
	http.HandleFunc("/v1", V1)
	http.HandleFunc("/", Index)
	http.HandleFunc("/views/js/ajax.js", ServeStaticFile)
	err := http.ListenAndServe(":8080", nil)
	if err != nil {
		log.Println(err)
	}
}
func V1(w http.ResponseWriter, r *http.Request) {
	fmt.Println("V1")
	//w.Write([]byte("[1,2,3,4,5]"))
	//w.Write([]byte("[{a:21,b:100}, {a:31,b:200}]"))
	w.Write([]byte(`function show(){alert('brainwu')}`))
}
func Index(w http.ResponseWriter, r *http.Request) {
	http.ServeFile(w, r, "views/index.html")
}
func ServeStaticFile(w http.ResponseWriter, r *http.Request) {
	fmt.Println("ServeStaticFile")
	http.ServeFile(w, r, "views/js/ajax.js")
}