{"id":22862663,"url":"https://github.com/faranak-cs/ajax-playground","last_synced_at":"2025-03-31T08:46:42.730Z","repository":{"id":266705621,"uuid":"899105312","full_name":"faranak-cs/ajax-playground","owner":"faranak-cs","description":"AJAX playground","archived":false,"fork":false,"pushed_at":"2024-12-07T16:51:59.000Z","size":26,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T13:21:42.868Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/faranak-cs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-05T16:21:35.000Z","updated_at":"2024-12-07T16:52:12.000Z","dependencies_parsed_at":"2024-12-05T17:28:41.143Z","dependency_job_id":"6a36a886-51ba-44ca-b1fb-9a08c2f54a14","html_url":"https://github.com/faranak-cs/ajax-playground","commit_stats":null,"previous_names":["faranak-cs/ajax-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faranak-cs%2Fajax-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faranak-cs%2Fajax-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faranak-cs%2Fajax-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faranak-cs%2Fajax-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/faranak-cs","download_url":"https://codeload.github.com/faranak-cs/ajax-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246443525,"owners_count":20778247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-13T10:14:17.231Z","updated_at":"2025-03-31T08:46:42.689Z","avatar_url":"https://github.com/faranak-cs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AJAX Playground\nInteract with server, simply using XHR() object without using any third-party library.\n\n## Getting Started\nThere are four ways to trigger a HTTP request in the context of HTML:\n- Links:\n```\n\u003ca href=\"http://localhost:8080/getProducts\"\u003eGet Products\u003c/a\u003e \n```\n- Forms:\n```\n\u003cform action=\"/get_products.php\" method=\"get\"\u003e\n```\n\n- Cookies:\n```\n\u003c?php\n\nsetcookie(\"user\", \"Faran\");\necho $_COOKIE['user'];\n\n?\u003e\n```\n\n- JavaScript (AJAX):\nMaking an AJAX call from JavaScript means sending an asynchronous request to a server to fetch or send data without reloading the web page. OR use a HTTP Client such as Axios.\n\n## Key Concepts\n- XMLHttpRequest object\n- Promises\n- Fetch API\n- Streams API\n- Async/Await\n\nCallbacks -\u003e Promises -\u003e Async/Await\n  \n### XHR\n#### Constructor Function\n```\nfunction Person() {\n  return new.target;\n}\n\n// Return the function definition\nlet person = new Person();\n\n// Return nothing\nlet person = Person();\n```\n\n#### AJAX Call\nThe following are the steps to perform an AJAX call:\n```\n// Create an object using XHR constructor function\nlet xhr = new XMLHttpRequest();\n\n// Configure the connection\nxhr.open(\"GET\", \"http://localhost:8080/getProducts\");\n\n// Configure the callback function\nxhr.onload = () =\u003e {\ndocument.getElementById('products').innerHTML = this.responseText;\n}\n\n// Send request to the server\nxhr.send();\n```\n#### Properties\n- readyState\n```\nif (xhr.readyState === 4 \u0026\u0026 xhr.status === 200){\n  // logic\n}\n```\n\n### Promises\nIntroduced in ES6. Series of nested function calls.\n- resolve()\n- reject()\n\n### Fetch API\nFetch uses Promises. Runs separately on network thread. \n```\nfetch(url)\n  .then(data)\n  .then(data)\n  ...\n  .catch(error)\n```\n- json() : returns a promise\n```\nlet url = \"http://localhost/8080/products\"\nlet myHeaders = {\n  \"Accept\" : \"application/json\"\n}\nfetch (url, {\n  headers : myHeaders\n})\n  .then (res =\u003e {\n    return res.json();\n})\n  .then (data =\u003e {\n    condole.log(data)\n})\n```\n\n### Streams API\n- Response.body : returns ReadableStream object\n- ReadableStream.getReader() : returns a reader\n- READER.read() : reads a stream\n\n### Async/Await\nJavaScript is synchronous, single-threaded (main thread) language. In order to communicate asynchronously with the server, the processing has to be done somewhere else. In this way, the main thread will be free to use.\n- Fetch with async/await\n\n## Useful Links\n- https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest\n- [What the heck is the event loop anyway? | Philip Roberts | JSConf EU](https://youtu.be/8aGhZQkoFbQ?si=iZkOZ_vSr5RFWqWe)\n- https://developer.mozilla.org/en-US/docs/Web/API/Streams_API\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaranak-cs%2Fajax-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaranak-cs%2Fajax-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaranak-cs%2Fajax-playground/lists"}